摘要：在研究的過程中，發現有大神用在上實現了它。由制定，是一個開放標準。省略這時，你就能看到線段周而復始地從一根細線變為一個圓圈。這次感覺是不是很相像了，只是現在它的開口一直處于一個位置，就沒什么魔性了。

相信這個 loading 的標志大家都很熟悉，是不是很和諧？

額...有毒，看得停不下來。既然，那么神奇，我就好奇地研(goo)究(gle)了一下。

原來它是 Material Design Progress（谷歌網站，你懂得）的一種 —— Circular。

在研究的過程中，發現有大神用 CSS + SVG 在 codePen 上實現了它。接著，就一步步來看這個魔性的 loading 是如何實現的。

既然，它是一個頁面元素，那么，就先看看它的 dom 結構。

可以看到，結構很簡單，是一個 div 標簽包裹一個 svg 標簽（circle 是 svg 中的一個預定義形狀，后面再講）。div 大家都很熟悉，那么，svg 是什么哪？

可縮放矢量圖形（英語：Scalable Vector Graphics，SVG）是一種基于可擴展標記語言（XML），用于描述二維矢量圖形的圖形格式。SVG由W3C制定，是一個開放標準。 ——wikipedia

同其他圖像格式相比，svg 的主要優勢在于：它是可伸縮的，即縮小、放大都不會影響顯示的質量。

知道了，svg 標簽是什么，那其中的 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 的大小。

明白了 svg 是用于描述圖形，那該如何將圖形畫于其中哪？

svg 提供了一些預定義形狀，除了之前用到的 circle，還有：

矩形

橢圓

線

折線

多邊形

路徑

這里只用到了 circle，對其他有興趣的可以直接點鏈接了解。

circle 的屬性很簡單，cx, cy 和 r，對應圓心的 x 坐標，y 坐標和半徑。

那例子中的就是畫一個以 （25, 25）為圓心，半徑為 20 的圓。

fill 屬性用來填充，這里 fill="none" 就是沒有填充色。

ok。這樣圓就完成了，但如果你也在一邊嘗試的話會發現，界面上依舊是一片空白。

別著急，剛剛只是前戲，正戲現在才開始。

從最初的圖中可以看到，并不是要畫一個圓，而是畫一段線，這段線圍繞一個圓來運動。

畫好了圓，給它加上外邊線不就有了一個圍繞圓的線了么，這就要用到 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

也就是給圖形的外線框添加顏色。

這時，你就能看到一個藍色的細環了。但是，太細了，可以通過 stroke-width 調整。

the stroke-width attribute specifies the width of the outline on the current object. Its default value is 1. If a  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 的大小，線寬會自動調整粗細。

于是，代碼又變成了這樣

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 用起來真心累...