加载html动画logo,仅CSS实现的加载动画 – Loader.css

仅CSS实现的加载动画 – Loader.css

4月 13, 2015

评论 (6)

Sponsor

当网页的页面大小较大，用户加载可能需要较长的时间，在这些情况下，我们一般会用到(加载)loading动画，提示于用户页面在加载中，这些UX常识我想很多设计师都懂，但做一个GIF动画有点麻烦，为了方便，看看今天分享的Loader.css，仅用CSS样式就能实现一个loading动画效果。

当前有35个动画效果，所以选择还是挺多的。

使用方法

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

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

改变加载动画颜色

此外你还要可以为loading动画加上颜色，代码如下：

.ball-grid-pulse > div {

background: orange;

}

浏览器兼容性

IE 9+

Firefox 36

Chrome 41

Safari 8

虽然不兼容IE8或以下版本，但我觉得已经够用了，目前现在用IE10和手机浏览网页的用户也很多了。

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

菜鸟 -

2016 年 07 月 06 日 下午 2:49

你好，我想问下那个吃豆人的动画 是哪个div呢

bingb511 -

2015 年 05 月 22 日 上午 9:39

不错。以后用用看

龙轩 -

2015 年 04 月 23 日 上午 10:46

很棒！

zm -

2015 年 04 月 16 日 下午 1:52

赞！

思源 -

2015 年 04 月 14 日 下午 7:50

学习了

Win7en乐园 -

2015 年 04 月 13 日 下午 3:53

感谢分享，这些资源都很棒的说！

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站