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的方式，即渐入渐出的。但我们需要的是立即消失，所以需要用到这个。
结果：