# 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

注意

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

# 源码解析

这个就没有什么好解析的,直接使用svg即可