前言
Loading动画随处可见，它会给用户一个视觉提示，表明当前页面正在加载或数据正在获取，从而增强用户的浏览体验。除了常见的Gif图片、CSS3、Canvas等方式，还可以使用SVG实现动画，这种方式是实用且具备良好的扩展性。下面使用几个简单的SVG属性实现一个Loading动画。
画一个圆
首先使用 viewBox 属性定义SVG工作区, 0 0 800 800将原点设置在左上角，宽度和高度各为800个单位。然后创建一个圆形元素，cx 和 cy 属性将圆心定位在 x 轴和 y 轴上 400 个单位的位置。半径 r 为 200 个单位，描边宽度 stroke-width 为 40 个单位，这样Loading的基本形状就画好了。
stroke-dasharray属性让圆不完整
stroke-dasharray 表现属性定义了用于绘制形状轮廓的虚线段和间隙的排列形式, 了解更多。
上述 stroke-dasharray 值为 800 1400 表示800个单位的虚线，后面跟着1400个单位的间隙，这里设置的1400 > 圆的周长2 * π * 半径（2 * 3.14 * 200 = 1256）, 确保只显示一条虚线。
stroke-linecap设置圆路径两端的形状
stroke-linecap设置成 round，给圆路径两端增加光滑的效果
stroke-dashoffset控制圆路径的起始位置
stroke-dashoffset 是一种表现属性，它定义了虚线与路径起点之间的偏移量, 了解更多。
使用CSS让圆动起来
使用简单的CSS动画让圆绕着中心连续旋转
通过对 stroke-dasharray 属性的值进行动画处理
动态旋转效果
结合 stroke-dasharray 和 stroke-dashoffset 两个属性创建动态旋转效果
