仅CSS实现的加载动画 – Loader.css
4月 13,
评论 (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 个设计网站 →
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
菜鸟 -
年 07 月 06 日 下午 2:49
你好，我想问下那个吃豆人的动画 是哪个div呢
bingb511 -
年 05 月 22 日 上午 9:39
不错。以后用用看
龙轩 -
年 04 月 23 日 上午 10:46
很棒！
zm -
年 04 月 16 日 下午 1:52
赞！
思源 -
年 04 月 14 日 下午 7:50
学习了
Win7en乐园 -
年 04 月 13 日 下午 3:53
感谢分享，这些资源都很棒的说！
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站
