三種Loading製做方案

1、簡介

Loading幾乎是每一個應用都會用到的一個組件。不少組件庫都會提供相應的Loading組件，可是有的時候咱們可能須要自定義Loading效果，掌握Loading組件製做的基礎知識將變得很是必要。Loading主要就是一個旋轉的圓環，而旋轉部分則比較簡單，直接經過CSS動畫便可實現，因此關鍵部分就是獲得Loading的圓環。

2、經過border-radius繪製圓環

咱們一般讓一個元素變成圓形是先將一個元素設置爲長和寬相等的正方形，而後給這個元素設置一個border-radius值爲50%。須要注意的是，border-radius: 50%是讓整個正方形元素都變成圓形，即包括邊框和內容區。因此咱們能夠經過控制元素邊框和內容區的大小，將元素的內容區域做爲內圓，將元素的邊框區域做爲外圓，從而繪製出一個圓環。

<div class="loading-css"></div>

.loading-css {
    width: 50px; /*先將loading區域變成正方形*/
    height: 50px;
    display: inline-block; /*將loading區域變成行內元素，防止旋轉的時候，100%寬度都在旋轉*/
    border: 3px solid #f3f3f3; /*設置四周邊框大小，並將顏色設置爲淺白色*/
    border-top: 3px solid red; /*將上邊框顏色設置爲紅色高亮，以便旋轉的時候可以看到旋轉的效果*/
    border-radius: 50%; /*將邊框和內容區域都變成圓形*/
}

此時效果以下:

圓環效果已經出來了，接下來讓圓環旋轉起來便可，如:

@keyframes loading-360 {
    0% {
        transform: rotate(0deg); /*動畫起始的時候旋轉了0度*/
    }
    100% {
        transform: rotate(360deg); /*動畫結束的時候旋轉了360度*/
    }
}
.loading-css { /*在以前的CSS中加上動畫效果便可*/
    animation: loading-360 0.8s infinite linear; /*給圓環添加旋轉360度的動畫，而且是無限次*/
}

2、經過svg來繪製圓環

SVG 意爲可縮放矢量圖形（Scalable Vector Graphics），其使用 XML 格式定義圖像，<circle> 標籤可用來建立一個圓，同時外面必須嵌套一個<svg>標籤。

<svg viewBox="0 0 50 50" class="loading-svg">
    <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
</svg>

.loading-svg {
    width: 50px; /*設置svg顯示區域大小*/
    height: 50px;
}

<svg>標籤的width和height設置的是svg圖形可顯示區域大小。而viewBox表示的是截取圖形的區域，由於矢量圖的繪製區域能夠是無限大的，具體繪製在哪裏根據具體的設置而定，好比上面的circle就繪製在圓心座標爲(25,25)，半徑爲20的圓形區域中，而viewBox設置爲0 0 50 50，表示截圖區域爲左上角座標爲(0, 0)，右下角座標爲(50,50)的矩形區域內，即會截取這個區域內的矢量圖，而後將截取的矢量圖放到svg的可顯示區域內，同時會根據svg可顯示區域的大小等比例進行縮放，可是截取的圖片必須在svg可顯示區域內完整顯示。
假如，如今講svg的大小設置爲60px，如:

.loading-svg {
    width: 60px; /*設置svg顯示區域大小*/
    height: 60px;
}

如上分析，viewBox截圖區域中，繪製的圓的圓心正好在截圖區域的中心，因此截圖區域四周邊框與繪製的圓之間有5px的距離，而圓的半徑爲20px，因此比例爲1:4，如今將svg顯示區域變爲60px，因此也須要將截圖區域等比例放大並佔滿整個svg顯示區域，截圖區域通過拉伸後，圓心位置變爲了(30,30)，即半徑變爲了30，按1:4比例，半徑變爲24，外圍變爲了6，因此整個圓也會跟着變大。

須要注意的時候，<cicle>繪製的圓目前是看不到的，由於沒有給畫筆設置上顏色，如:

.path {
    stroke: #409eff; /*給畫筆設置一個顏色*/
    stroke-width: 2; /*設置線條的寬度*/
}

此時能夠看到繪製出的圓環了。爲了給圓環添加轉動效果，咱們須要繪製帶缺口的圓環，後面經過改變缺口的位置大小來實現轉動效果，如:

.path {
    stroke-dasharray: 95, 126; /*設置實現長95，虛線長126*/
    stroke-dashoffset: 0; /*設置虛線的偏移位置*/
}

如圖所示，圓環的繪製起點是在水平方向最右邊的那個點，而後進行順時針繪製。由於該圓環的周長爲23.1420=125.6，約等於126，stroke-dasharray設置了實線(可見部分)長爲95，約等於圓的3/4，因此只能繪製到圓環的最高點位置，接下來是126的虛線，可是圓環周長只有126，因此只能顯示31的虛線。能夠看作是一根無限循環的水平線條，實線(-221,0)---虛線(-126,0)---目前起點爲(0,0)---實線(95,0)---虛線(221,0)---實線(316,0)，而後讓水平線的起點(0,0)位置與圓環的起點位置重合，水平線順時針沿着圓環繞便可，隨着stroke-dashoffset起點位置的偏移，左側的(-126,0)的虛線就能夠慢慢顯示出來。當stroke-dashoffset值爲負數的時候，上面的線往右拉，當stroke-dashoffset值爲正數的時候，下面的線往右拉。

接下來就是添加圓環的轉動效果，分別設置三個動畫狀態，如:

// 0%
{
    stroke-dasharray: 1, 126; /*實線部分1，虛線部分126*/
    stroke-dashoffset: 0; /*前面1/126顯示實線，後面125顯示空白*/
}

從圓環最右邊做爲起點繪製1個像素的距離的實線，接下來繪製126像素的虛線(空白)，由於圓周長爲126，因此剩餘部分所有爲空白，如圖所示，

// 50%
{
    stroke-dasharray: 95, 126; /*實線部分95，虛線部分126*/
    stroke-dashoffset: -31px; /*順時針偏移31/126，即前31/126顯示空白，後面3/4顯示線條*/
}

從圓環的最右邊做爲起點，而且順時針移動31像素，即圓環的1/4，因此實線起點變爲了圓環的最底部，實線長度爲95像素，即圓環的3/4，如圖所示，

// 100%
{
    stroke-dasharray: 6, 120; /*實線部分6，虛線部分120*/
    stroke-dashoffset: -120px; /*最後順時針偏移120/126，即前120/126顯示空白，後面6點顯示線條部分*/
}

從圓環的最右邊做爲起點，而且順時針移動120像素，因此實線長度僅剩下6像素了，如圖所示，

給圓環加上動畫效果，如:

.path {
    animation: loading-dash 1.5s ease-in-out infinite;
}
@keyframes loading-dash {
    0% {
        stroke-dasharray: 1, 126; /*實線部分1，虛線部分126*/
        stroke-dashoffset: 0; /*前面1/126顯示實線，後面125顯示空白*/
    }

    50% {
        stroke-dasharray: 95, 126; /*實線部分95，虛線部分126*/
        stroke-dashoffset: -31px /*順時針偏移31/126，即前31/126顯示空白，後面3/4顯示線條*/
    }

    to {
        stroke-dasharray: 6, 120; /*實線部分6，虛線部分120*/
        stroke-dashoffset: -120px; /*最後順時針偏移120/126，即前120/126顯示空白，後面6點顯示線條部分*/
    }
}

爲了讓Loading動畫更加生動細膩，咱們還能夠給svg標籤也加上一個旋轉動畫，如:

.loading-svg {
    width: 50px; /*設置svg顯示區域大小*/
    height: 50px;
    animation: loading-rotate 1.5s infinite ease-in-out; /*給svg也加上一個旋轉動畫*/
}
@keyframes loading-rotate {
    to {
        transform: rotate(1turn); // 旋轉1圈
    }
}

3、經過iconfont字體圖標

咱們能夠直接經過iconfont字體圖標代替圓環的繪製，直接以字體的形式顯示出圓環，而後給其加上旋轉動畫便可，如：
咱們能夠在iconfont網站上下載喜歡的Loading圖案。字體圖標下載後，將解壓後的內容拷貝到項目中，並引入其中的iconfont.css到頁面中，給要顯示字體圖標的元素加上iconfont類樣式，字體圖標會有一個對應的unicode編碼，經過::before設置content爲該unicode編碼便可顯示對應的字體圖標了，或者直接在unicode碼前加上\&#x，並做爲元素內容。

<link rel="stylesheet" href="icon/iconfont.css">
<style>
.icon-loading {
    display: inline-block; /*須要設置爲行內塊元素動畫纔會生效*/
    font-size: 56px; 
    color: grey;
}
.icon-loading::before {
    content: "\e65b"; /*顯示字體圖內容，值爲\unicode*/
}
</style>
<i class="icon-loading iconfont"></i>
<!--或者-->
<i class="iconfont">&#xe65b</i><!--值爲&#xunicode-->

接下來讓字體圖標旋轉起來便可，如:

.icon-loading {
    animation: rotating 2s infinite linear;
}
@keyframes rotating {
    0% {
        transform: rotate(0deg) /*動畫起始位置爲旋轉0度*/
    }

    to {
        transform: rotate(1turn) /*動畫結束位置爲旋轉1圈*/
    }
}