CSS：一个简单的loading动画

<div id="circle"></div><div id="inner">  <div id="spiner"></div>  <div id="filler"></div>  <div id="masker"></div></div>

#inner {  position: absolute;  left: 24px;  top: 24px;  width: 100px;  height: 100px;  background-color: orange;  border-radius: 50%;}#circle {  position: absolute;  width: 120px;  height: 120px;  background-color: transparent;  border-radius: 50%;  border: 5px solid orange;  border-left: 5px solid transparent;}#filler,#spiner {  position: absolute;  width: 50px;  height: 100px;  background-color: blue;  border-radius: 50px 0 0 50px;}#spiner {  background-color: green;}#masker {  position: absolute;  left: 50px;  width: 50px;  height: 100px;  background-color: orange;  border-radius: 0 50px 50px 0px;}#spiner {  background-color: blue;}@keyframes outer {  0% {transform: rotate(0deg);}  100% {transform: rotate(360deg);}}@keyframes spin {  0% {transform: rotate(360deg)}  100% {transform: rotate(0deg)}}@keyframes second-half-show {  0% {opacity: 0}  50%, 100% {opacity: 1}}@keyframes second-half-hide {  0% {opacity: 1;}  50%, 100% {opacity: 0;}}#spiner {  transform-origin: right center;  animation: spin .8s infinite linear;}#filler {  animation: second-half-hide .8s steps(1, end) infinite;}#masker {  animation: second-half-show .8s steps(1, end) infinite;}#circle {    animation: spin .8s infinite linear;}

steps(1,end)1表示时间间隔，end表示动画结束。
由于动画的结束是ease的方式，即渐入渐出的。但我们需要的是立即消失，所以需要用到这个。
结果：