svg画loading

成品效果

loading.gif

相关代码

文本
创建一个空的svg，写入文本

Loading

参数	描述	默认值
x	文本绘制x轴位置	0
y	文本绘制y轴位置	0
dx	每个字符相对前一个字符的偏移距离	0
dy	每个字符相对前一个字符的偏移距离	0
fill	文字的颜色	black
stroke	如果设置了stroke，字的边缘会再“描一层边”。如果设置了stroke并将fill设为none，呈现为空心字。	none

css中影响字体样式的属性同样可以作用在上。

.svg text{font-size:24px;text-align:center;font-family:"Arial Black";font-bold:bold;text-shadow:0 0 7px #fff;}

text-shadow设置文字有一圈边缘阴影

点
其实就是一个个的圆

· 半径 r 等于5；
· cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)；
· transform属性同CSS3的含义，可参考学习下：
SVG之transform
理解SVG坐标系统和变换： transform属性

接下来就是利用CSS3形成点的动画效果：
(1) 透明度的变化

@keyframes opacity {
  3% {
    fill-opacity: 1;
  }

  75% {
    fill-opacity: 0;
  }
}

(2) 颜色的变化

@keyframes colors {
  0% {
    fill: yellowgreen;
  }

  10% {
    fill: gold;
  }

  75% {
    fill: crimson;
  }
}

(3) 时间的变化
需要多个小圆点组成动画的效果，那么就需要每个点颜色、透明度变化的不在同一个时间点

circle {
  fill: dodgerblue;
  fill-opacity: 0;
  -webkit-animation: opacity 1.2s linear infinite;
  animation: opacity 1.2s linear infinite;
}

完整代码：