仅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
感谢分享,这些资源都很棒的说!
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站