新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

使用iconfont+keyframe,IE10以下降级显示为静态的,IE10、11正常

.sui-loading


loading-large, loading-xlarge, loading-xxlarge


loading-small, loading-xsmall, loading-xxsmall


loading-dark, .loading-light


  1. <p>.sui-loading</p>
  2. <div class="sui-loading loading-inline"><i class="sui-icon icon-pc-loading"></i></div>
  3. <div class="sui-loading loading-dark loading-inline"><i class="sui-icon icon-pc-loading"></i></div>
  4. <div class="sui-loading loading-light loading-inline"><i class="sui-icon icon-pc-loading"></i></div>
  5. <hr>
  6. <p>loading-large, loading-xlarge, loading-xxlarge</p>
  7. <div class="sui-loading loading-large"><i class="sui-icon icon-pc-loading"></i></div>
  8. <div class="sui-loading loading-xlarge"><i class="sui-icon icon-pc-loading"></i></div>
  9. <div class="sui-loading loading-xxlarge"><i class="sui-icon icon-pc-loading"></i></div>
  10. <hr>
  11. <p>loading-small, loading-xsmall, loading-xxsmall</p>
  12. <div class="sui-loading loading-small loading-inline"><i class="sui-icon icon-pc-loading"></i></div>
  13. <div class="sui-loading loading-xsmall loading-inline"><i class="sui-icon icon-pc-loading"></i></div>
  14. <div class="sui-loading loading-xxsmall loading-inline"><i class="sui-icon icon-pc-loading"></i></div>
  15. <hr>
  16. <p>loading-dark, .loading-light</p>
  17. <hr>
  18. <input style="vertical-align:top">
  19. <div class="sui-loading loading-xxsmall loading-inline loading-light"><i class="sui-icon icon-pc-loading"></i></div>

很简单,可以自己定制尺寸

为方便使用,默认有几种推荐的尺寸,分别对应class: loading-small,loading-xsmall,loading-xxsmall, loading-l, loading-ll, loading-lll

默认作为块级盒子显示,.sui-loading.loading-inline 则会以内联盒子形式显示 (inline-block)

颜色方面有默认色、黑色、灰色三种, .sui-loading.loading-dark .loading-light