Loading 组件使用说明

发表于 | 分类于 | 评论数： | 阅读次数：

加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等，而加载动画能够在内容加载完成前给用户视觉反馈，从而能够吸引用户而不让他们直接放弃继续浏览你的网站。

使用CSS3动画的优点

  • CSS3加载动画比起直接使用动图的好处是它们是易扩展的并且不需要等待加载过程。
  • CSS3动画无论是什么设备它们都能够清晰，流畅地呈现，并且你可以很容易地去改善它的效果。
  • 在移动端减少网络流量和节约电耗
  • 可以方便修改和操作动画效果

使用CSS3动画的缺点

  • 不同的平台和浏览器有着不同的兼容性问题
  • 复杂的css3动画需要更多的HTML标签且受浏览器性能制约

常见的CSS3 Loading动画

解决的问题

uiLoading组件的出现主要为了解决以下问题：

  1. 相比于使用GIF，更容易调整大小颜色，动画效果，动画更流畅，无需加载。
  2. 不增加额外标签，仅使用容器的伪类:before与:after来实现动画，使用范围更广范
  3. 解决按钮重复快速度点击导致异步多次提交的BUG
  4. 以jQ插件的方式，调用简单方便

适用场景

  1. Card中的信息需要异步加载显示时
  2. Table列表数据异步加载示
  3. 按钮点击有异步请求时

使用方式

//Button 按钮
$('#btn1').uiLoading('sm');//调用插件传入参数sm，在button上显示loading动画			
$('#btn1').uiLoading('sm');//再次调用隐藏button上的loading动画

//列表或模块卡片上
$('#table1').uiLoading('lg');//调用插件传入参数lg，在table容器上显示较大的loading动画					
$('#table1').uiLoading('lg');//再次调用隐藏table上的loading

如果不传入任何参数，则默认显示较大的loading

按钮Loading效果

列表Loading效果

Codepen 示例

See the Pen uiLoading示例 by LT (@togglelt) on CodePen.