加载动画



如果网页内容很多需要加载很长时间,那么给用户一些反馈将会是明智的选择。因此,我们提供了这些反馈效果。

线性

有几种不同类型的进度条。

进度确定


  <div class="progress">
    <div class="determinate" style="width: 70%"></div>
  </div>
        

进度不定


  <div class="progress">
    <div class="indeterminate"></div>
  </div>
        

环形


  <div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
      <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
        

变幻颜色


   <div class="preloader-wrapper big active">
     <div class="spinner-layer spinner-blue">
       <div class="circle-clipper left">
         <div class="circle"></div>
       </div><div class="gap-patch">
       <div class="circle"></div>
         </div><div class="circle-clipper right">
       <div class="circle"></div>
     </div>
   </div>

   <div class="spinner-layer spinner-red">
     <div class="circle-clipper left">
       <div class="circle"></div>
         </div><div class="gap-patch">
       <div class="circle"></div>
         </div><div class="circle-clipper right">
       <div class="circle"></div>
     </div>
   </div>

   <div class="spinner-layer spinner-yellow">
     <div class="circle-clipper left">
       <div class="circle"></div>
         </div><div class="gap-patch">
       <div class="circle"></div>
         </div><div class="circle-clipper right">
       <div class="circle"></div>
     </div>
   </div>

   <div class="spinner-layer spinner-green">
     <div class="circle-clipper left">
       <div class="circle"></div>
         </div><div class="gap-patch">
       <div class="circle"></div>
       </div><div class="circle-clipper right">
         <div class="circle"></div>
       </div>
     </div>
   </div>