Loaders.css是纯css的loading动画库。
Delightful and performance-focused pure css loading animations.
demo如下：
安装
bower方式
1 | bower install loaders.css |
npm方式
1 | npm i --save-dev loaders.css |
使用
标准使用:
- 引入loaders.min.css
- 创建一个元素并添加动画的css类
- 插入适量的到上一步创建的元素中
demo如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<!DOCTYPE html>
<html>
<head>
<title>loaders css</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ConnorAtherton/loaders.css/master/loaders.min.css">
<style type="text/css">
.loader-demo {
background-color: gray;
color: blue;
border-color: blue;
height: 150px;
padding-top: 50px;
text-align: center;
> div {
display: inline-block;
}
}
.ball-pulse > div {
background-color: orange;
}
</style>
</head>
<body>
<h3>loaders css</h3>
<div class="loader-demo">
<div class="ball-pulse">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>另外，这个库也支持jQuery的使用，具体参考这里
定制
可改变动画图标的背景颜色
1
2
3.ball-grid-pulse > div {
background: orange;
}浏览器兼容性
- IE11
- Firefox 36
- Chrome 41
- Safari 8
【全文完】