首页 > WEB前端 > CSS > 正文


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

04-14 18:29:55   来源:shikezhi   评论: 点击:

用CSS样式就能实现一个loading动画效果

用CSS样式就能实现一个loading动画效果:

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

使用方法

Step 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>

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

<div class="loader-inner ball-pulse">div>

改变加载动画颜色

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

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

浏览器兼容性

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

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

在线DEMO: http://connoratherton.com/loaders

下载地址: https://github.com/ConnorAtherton/loaders.css

相关热词搜索:css

上一篇:如何使用CSS修改浏览器默认选中背景颜色 下一篇:Web标准:结构,表现和行为分离
分享到: 收藏