按钮中的加载动画 页面的加载动画

按钮中的加载动画

  • 给 .btn 系列的按钮元素引用 .btn-spinner 类，得到 loading 状态下的按钮样式。它拥有和 .disabled / [disabled] 一样的设计用意，并加载等待的效果。
  • 但 input 标签没有 :before，所以在 .btn 系列按钮元素中，input 的按钮不会显示 spinner 动画。
  • 在按钮中引用的 .btn-spinner 的同时，需要脚本控制给拥有 [disabled] 属性的按钮标签添加这个属性，才能真整实现加载状态下的按钮不可用。
实例
            
<button class="btn default btn-spinner" disabled>
  ...
</button>

页面的加载动画

  • 当页面加载动画出现时，<body> 将添加类 .page-spinner-open 这个类。
  • 将页面加载动画的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 <body> 的直接子元素）。
实例
            
<div class="page-spinner">
  <div class="spinner-layer">
    <div class="spinner">
      <span class="one"></span>
      <span class="two"></span>
      <span class="three"></span>
      <span class="four"></span>
      <span class="five"></span>
      <span class="six"></span>
    </div>
  </div>
</div>