css实现动态正在加载图标

利用keyframes动画实现，

 

.er-button-loading .er-button-style:before {
  content: "\f110";
  font-family: "FontAwesome";
  display: inline-block;
  z-index: 2;
  background: inherit;
  font-size: 1.4em;
  padding: inherit;
  -webkit-animation: loading 1s step-start;
  -webkit-animation-iteration-count: infinite;///播放动画次数，infinite表示循环播放

}

@keyframes loading {
   0%{
     transform: rotate(0deg);
     transform-origin: center;///旋转的基点位置，center表示从中间开始旋转
   }
  11%{
    transform: rotate(40deg);
    transform-origin: center;
  }
  22%{
    transform: rotate(80deg);
    transform-origin: center;
  }
  33%{
    transform: rotate(120deg);
    transform-origin: center;
  }
  44%{
    transform: rotate(160deg);
    transform-origin: center;
  }
  55%{
    transform: rotate(200deg);
    transform-origin: center;
  }
  66%{
    transform: rotate(240deg);
    transform-origin: center;
  }
  77%{
    transform: rotate(280deg);
    transform-origin: center;
  }
  88%{
    transform: rotate(320deg);
    transform-origin: center;
  }
   100%{
     transform: rotate(360deg);
     transform-origin: center;
   }
 }
@-webkit-keyframes loading {
  0%{
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: center;
  }
  11%{
    -webkit-transform: rotate(40deg);
    -webkit-transform-origin: center;
  }
  22%{
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: center;
  }
  33%{
    -webkit-transform: rotate(120deg);
    -webkit-transform-origin: center;
  }
  44%{
    -webkit-transform: rotate(160deg);
    -webkit-transform-origin: center;
  }
  55%{
    -webkit-transform: rotate(200deg);
    -webkit-transform-origin: center;
  }
  66%{
    -webkit-transform: rotate(240deg);
    -webkit-transform-origin: center;
  }
  77%{
    -webkit-transform: rotate(280deg);
    -webkit-transform-origin: center;
  }
  88%{
    -webkit-transform: rotate(320deg);
    -webkit-transform-origin: center;
  }
  100%{
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: center;
  }
}