加载动态效果（圆形转圈）-2

   
      
   <meta>
      <title></title>
   
   <style type="text/css">
      .loader{
         text-indent: -9999em;/*隐藏文字*/
         position: relative;
         width: 200px;
         height: 200px;
         background: #FFFFFF;
         background: -webkit-linear-gradient(left,#ffffff 10%,rgba(255,255,255,0) 50%);/*设置line-gradient的方向为从左到右，从最左侧向右10%均为纯白色，再向右50%渐变为完全透明的白色*/
          background: linear-gradient(to left,#ffffff 10%,rgba(255,255,255,0) 50%);
         box-shadow: inset 0 0 0 20px rgba(255,255,255,.2); /*设置内部阴影，颜色为白色，宽度为15像素*/
         border-radius:50% ;/*使形状轮廓为圆形*/
         -webkit-animation: load-effect 2s infinite linear;
         animation: load-effect 2s infinite linear;
      }
      .loader:before {
         position: absolute;
         content: '';
         width: 50%;
         height: 50%;
         background: #FFF;
         left: 0;
         top: 0;
         border-radius: 100% 0 0 0; /*设置顶部和左侧圆角像素为0像素，其余两侧为200像素*/
      }
      .loader:after{
         position: absolute;
         content: '';
         width: 160px;
         height: 160px;
         border-radius: 50%;
         left: 20px;
         top: 20px;
         background: #4ea980;
      }
      @-webkit-keyframes load-effect{
         0%{
            -webkit-transform: rotate(0deg);
         }
         100%{
            -webkit-transform: rotate(360deg);
         }
      }
      @keyframes load-effect{
         0%{
            transform: rotate(0deg);
         }
         100%{
            transform: rotate(360deg);
         }
      }
   </style>
   
      
   <div style="background: #4EA980; width: 200px;height: 200px;">
         
    <div class="loader">
     loading...
    </div>
      
   </div>