加载html动画logo,仅CSS实现的加载动画

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

4月 13, 2015

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

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

{ 发表评论 }

姓名 (必填)

邮件 (必填)

网站

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

html动画爱心制作代码,CSS心形加载的动画源码的实现
废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .heart-loading { margin-top: 120px; width: 200px; height: 200px; ...
纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一.效果图二.步骤 1.html部分 2.css部分前言纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
CSS齿轮转动加载动画
CSS齿轮转动加载动画前言:该动画主要流程分为三块:绘制齿轮,齿轮转动动画,出场动画绘制齿轮绘制齿轮主要是使用svg进行绘制的 <svg class="guaongRudderO ...
直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
Android - Loading 中间显示logo，外部ing转圈加载动画
需求: 需求很简单,就是中间显示一个logo,外部是一个转圈的动画,这样看着就是一个loading. 这里通过dialog来实现,比较好集中代码. 图片: 全图 loading1 ...
layui 表格加载动画_仅需四步！BIM模型变身为漫游动画！
在很多工程中,建设单位对于BIM工作的主要侧重点分为两项:一是通过BIM技术解决现场实际问题,二就是对项目的三维展示需求. 但是很多从事BIM行业的小伙伴一直在进行机械性的模型创建工作,并没有参与过模 ...
「HTML+CSS」--自定义加载动画【047】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机 ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...

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

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

最新文章

热门文章