Loaders.CSS 加载动画

在开发 Hybrid APP 时，由于 Hybrid APP 的加载及页面切换均不及 Native APP，会出现时间较长的空白页，这十分影响 APP 的体验，因此运用加载动画就成为改善体验的重要方法，而 Loader.CSS，仅用 CSS 样式就能实现一个加载动画效果。

介绍

Loaders.CSS是一个完全由CSS撰写的各种加载动画合集，不需要任何的背景或者图片，而且运行流畅，拥有多种不同风格和方式的动画效果，极具创意的Loading加载动画合集。

Loaders.CSS 是一个为性能优化的实现加载动画效果的 CSS 框架，一个完全由CSS编写的加载动画集合，使用CSS属性避免浪费多余的计算和绘画。

使用

1. 引入 loaders.min.css 和 loaders.css.js，这个 JS 仅是为了简化动画的 DIV 标签，如果不加这个 JS，那么你的动画就必须加上对应数量 DIV 标签才能正常显示动画，所以建议加上，这样语义化好会好些。

   <link rel="stylesheet" type="text/css" href="loaders.min.css">
   <script type="text/javascript" src="loaders.css.js"></script>

2. HTML 代码，给 loading 元素加入动画 class ，如下：

   <div id="loading" class="loader-inner ball-pulse"></div>

3. 此外你还要可以为 loading 动画加上颜色(加载动画默认为白色)，代码如下：

   .ball-grid-pulse > div {
   background: orange;
   }

4. 最后动画的淡入淡出可以配合 JQuery 来实现：

   //淡入
   jQuery(".loading").addClass("loader-chanage");
   jQuery(".loading").fadeOut();//jQuery(".loading").fadeOut(500); 可控制时间，单位为 ms，下同
   //淡出
   jQuery(".loading").addClass("loader-chanage");
   jQuery(".loading").fadeIn();

注意

1. 兼容性：

   • IE 9+
   • Firefox 36
   • Chrome 41
   • Safari 8

2. DEMO：

   https://connoratherton.com/loaders

   PS：不知道怎么回事，官方 DEMO 网站有问题经常打不开，我贴下图以供参考。GIT上的示例顺序和下图是完全一致的。

   

   

   

参考

Loader.CSS – 实现动画加载

Loaders.CSS纯代码加载动画合集 (不知道为什么，被标记为危险网站。。。)