# SVG Loading
# 示例
注意
需注意背景色,所有svg图片颜色都是白色,所以背景色不可为白色。
# 源码
<ul id="svg-loading-img">
<li>
<img src="/svg-loaders/audio.svg" width="40" alt="">
</li>
<li>
<img src="/svg-loaders/rings.svg" width="60" alt="">
</li>
<li>
<img src="/svg-loaders/grid.svg" width="40" alt="">
</li>
<li>
<img src="/svg-loaders/hearts.svg" width="80" alt="">
</li>
<li>
<img src="/svg-loaders/oval.svg" width="50" alt="">
</li>
<li>
<img src="/svg-loaders/three-dots.svg" width="60" alt="">
</li>
<li>
<img src="/svg-loaders/spinning-circles.svg" width="50" alt="">
</li>
<li>
<img src="/svg-loaders/puff.svg" width="50" alt="">
</li>
<li>
<img src="/svg-loaders/circles.svg" width="50" alt="">
</li>
<li>
<img src="/svg-loaders/tail-spin.svg" width="50" alt="">
</li>
<li>
<img src="/svg-loaders/bars.svg" width="40" alt="">
</li>
<li>
<img src="/svg-loaders/ball-triangle.svg" width="50" alt="">
</li>
<div style="clear: both"></div>
</ul>
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
38
39
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
38
39
注意
svg图片路径如何?我想这不用我教你了,当然,如果你是小白,可以联系我(右上角进入博客可以找到我的联系方式)
#svg-loading-img{
background: #fff;
margin: 20px auto;
list-style: none;
li {
width: 180px;
height: 180px;
line-height: 176px;
text-align: center;
float: left;
background-repeat: no-repeat;
background-position: center;
list-style: none;
img {
vertical-align: middle;
}
&:nth-child(1) {
background-color: #1ABC9C;
}
&:nth-child(2) {
background-color: #34495E;
}
&:nth-child(3) {
background-color: #F39C12;
}
&:nth-child(4) {
background-color: #9B59B6;
}
&:nth-child(5) {
background-color: #3498DB;
}
&:nth-child(6) {
background-color: #E74C3C;
}
&:nth-child(7) {
background-color: #2ECC71;
}
&:nth-child(8) {
background-color: #2C3E50;
}
&:nth-child(9) {
background-color: #F1C40F;
}
&:nth-child(10) {
background-color: #8E44AD;
}
&:nth-child(11) {
background-color: #2980B9;
}
&:nth-child(12) {
background-color: #E74C3C;
}
}
}
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
# 源码解析
这个就没有什么好解析的,直接使用svg即可