SVG + CSS 实现 Material Design Loading
相信这个 loading 的标志大家都很熟悉，是不是很和谐？
额...有毒，看得停不下来。既然，那么神奇，我就好奇地研(goo)究(gle)了一下。
原来它是 Material Design Progress（谷歌网站，你懂得）的一种 —— Circular。
在研究的过程中，发现有大神用 CSS + SVG 在 codePen 上实现了它。接着，就一步步来看这个魔性的 loading 是如何实现的。
SVG
既然，它是一个页面元素，那么，就先看看它的 dom 结构。
<div class="loader">
<svg class="circular" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none"/>
</svg>
</div>可以看到，结构很简单，是一个 div 标签包裹一个 svg 标签（circle 是 svg 中的一个预定义形状，后面再讲）。div 大家都很熟悉，那么，svg 是什么哪？
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。 ——wikipedia
同其他图像格式相比，svg 的主要优势在于：它是可伸缩的，即缩小、放大都不会影响显示的质量。
知道了，svg 标签是什么，那其中的 viewBox 属性又是用来干什么的？
viewBox
The viewBox attribute allows you to specify that a given set of graphics stretch to fit a particular container element. ——MDN
我的理解就是，选中 svg 中的一部分作为内容的显示区域来进行放大或缩小来适应整个 svg 的大小。（如果还是不太明白的，可以查看张鑫旭大神的文章，形象生动）
viewBox 的值是 4 个数字并用逗号分割，分别对应原 svg 图的 x 坐标，y 坐标，宽度，高度。通过这 4 个值就能在原 svg 图中划出一个矩形，然后将它缩放至现有 svg 的大小。
circle
明白了 svg 是用于描述图形，那该如何将图形画于其中哪？
svg 提供了一些预定义形状，除了之前用到的 circle，还有：
这里只用到了 circle，对其他有兴趣的可以直接点链接了解。
circle 的属性很简单，cx, cy 和 r，对应圆心的 x 坐标，y 坐标和半径。
那例子中的就是画一个以 （25, 25）为圆心，半径为 20 的圆。
<circle cx="25" cy="25" r="20" fill="none"/>fill 属性用来填充，这里 fill="none" 就是没有填充色。
ok。这样圆就完成了，但如果你也在一边尝试的话会发现，界面上依旧是一片空白。
别着急，刚刚只是前戏，正戏现在才开始。
stroke
从最初的图中可以看到，并不是要画一个圆，而是画一段线，这段线围绕一个圆来运动。
画好了圆，给它加上外边线不就有了一个围绕圆的线了么，这就要用到 stroke。
The stroke attribute defines the color of the outline on a given graphical element. The default value for the stroke attribute is none. ——MDN
也就是给图形的外线框添加颜色。
<circle cx="25" cy="25" r="20" fill="none" stroke="#106CFA"/>这时，你就能看到一个蓝色的细环了。但是，太细了，可以通过 stroke-width 调整。
the stroke-width attribute specifies the width of the outline on the current object. Its default value is 1. If a <percentage> is used, the value represents a percentage of the current viewport. If a value of 0 is used the outline will never be drawn. ——MDN
刚才，觉得太细就是因为 stroke-width 的默认值是 1。这里将 stroke-width 设定成 5%，使用百分比的好处是：当它做成组件后，只需控制 svg viewport 的大小，线宽会自动调整粗细。
于是，代码又变成了这样
<circle cx="25" cy="25" r="20" fill="none"
stroke="#106CFA" stroke-width="5%" />loading 中的线段并不是一直保持环装，而是长短会变化，这该如何控制哪？
答案是：stroke-dasharray。
the stroke-dasharray attribute controls the pattern of dashes and gaps used to stroke paths. ——MDN
也就是说，它是用来一组值来表示设置环绕在形状外部的虚线间隔。当这组值是偶数时，那么，它就分别表示线段长，间距长...，并以此类推。当它为奇数时，系统会默认追加相同的设置到末尾，使它成为偶数，然后再按偶数时的处理方式，如 5,3,2 就是 5,3,2,5,3,2。
你会想，虚线和 loading 有啥关系，loading 是一条线啊？没错，一开始我也是这样想的。
但，大神就想到了，如果将虚线的第一部分设定的足够长，那么它在可视范围内就是一条实线。于是，通过控制第一段实线的长度，也就控制了整条线段的长度。
因为，线段变长变短是一个过程，这就要用到动画。
.loader{
// 省略...
circle{
animation: circle-dash 2s ease-in-out infinite;
}
}
@keyframes circle-dash{
0% {
stroke-dasharray: 1, 125;
}
100% {
stroke-dasharray: 125, 125;
}
}这时，你就能看到线段周而复始地从一根细线变为一个圆圈。但这有突然闪屏的感觉，和所要的结果不同，再修改一下动画，让线段成为圆圈后再退回成一根细线。
@keyframes circle-dash{
0% {
stroke-dasharray: 1, 125;
}
50% {
stroke-dasharray: 125, 125;
}
100% {
stroke-dasharray: 1, 125;
}
}是不是和结果越来越像了，但还是不对，loading 中的线段没有给人有倒退的感觉，那该如何做？
那就要使用 stroke-dashoffset，通过设定该属性线段的开始位置，来作出线段在不断前行的假象。
the stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash. ——MDN
再修改一下，刚刚的动画。
@keyframes circle-dash{
0% {
stroke-dasharray: 1, 125;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 125;
stroke-dashoffset: -25px;
}
100% {
stroke-dasharray: 100, 125;
stroke-dashoffset: -125px;
}
}这次感觉是不是很相像了，只是现在它的开口一直处于一个位置，就没什么魔性了。可以通过让整个圆形旋转起来，这样圆的开口的位置也就会不断变化了。
.circular{
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Finish！来看看最后的结果。（额，不支持 CodePen，可以到我的博客或直接到 CodePen 上查看）
stroke 还有几个其他相关的属性，比如，stroke-linecap 可以用来改变线头的形状，其他还有 stroke-linejoin, stroke-miterlimit, stroke-opacity。
最后
模拟 Material Design 的 loading 就这样完成了，并应用到了我的博客中，比如，首页的文章列表的懒加载。
最近，因工作需要搭了一个 React 全家桶 + Ant.Design 的脚手架，有兴趣的可以看看。
最后不得不吐槽一句，React + Redux 相对于 vue 2 + vuex 用起来真心累...