實現環形進度條的幾種方法

環形進度條的問題，網上有不少的demo，也有各類不一樣的實現方式，很棒的實現也有不少，我這本身作一下一方面是想開闊一下本身的思路，一方面很久沒看SVG和Canvas的東西了，基礎的拿來熟悉下。

DIV + CSS3

這個是最基本的實現方式，我在想怎樣用盡可能少的DOM結構來實現，最終仍是用了三個div，不過這個方法僅供開闊思路，樣式表如今PC還好，手機上的問題就多了，僅供參考。

• 一、利用div的border畫一個背景的圓環

<div class="demo1-bg1"></div>
    /* css */
    .demo1-bg1{
        width: 100px;
        height: 100px;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        margin: 50px auto;
        background: fff;
        border-radius: 50%;
        box-shadow: 0 0 0 10px red inset;
    }

• 二、添加兩個子元素div，分別設置border來實現兩個半圓環並遮蓋背景圓環

<div class="demo1-bg1">
        <div id="J_bg2_1" class="demo1-bg2-1"></div>
        <div id="J_bg2_2" class="demo1-bg2-2"></div>
    </div>
    /* css */
    .demo1-bg2-1,.demo1-bg2-2{
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-box-flex: 1;
        height: 80px;
        background: #fff;
        border: 10px solid grey;
    }
    .demo1-bg2-1{
        border-radius: 50px 0 0 50px;
        border-color: grey transparent grey grey;
        transform-origin: 100% 50%;
        z-index: 1;
    }
    .demo1-bg2-2{
        border-radius: 0 50px 50px 0;
        border-color: grey grey grey transparent;
        transform-origin: 0 50%;
        z-index: 2;
    }

--> -->

• 三、用JS旋轉兩個子元素，露出背景圓環

DIV + CSS3 實現圓環進度條

SVG

這個原理也很簡單，是利用SVG的stroke和dash-array屬性來實現，也是我經常使用的實現方式。

• 繪製一個圓環路徑，填充灰色圓環

<svg xmlns="http://www.w3.org/200/svg" height="150" width="110">
    <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/>
</svg>

• 繪製一個內圓環，半徑/圓心和外圓環同樣，恰好重疊

<circle class="demo2" id="J_progress_bar" cx="55" cy="55" r="50" fill="none" stroke="red" stroke-width="5"/>

• 設置內圓環的stroke-dasharray屬性，stroke-dasharray的值得意思是，第一個值爲圓環第一段填充顏色的長度，第二個值爲圓環接下來不填充顏色的長度，以此類推並重復。這裏設置爲：stroke-dasharray="0,10000" 第一個值就是填充紅色的值，爲0，第二段爲不填充的長度，超過圓環的周長便可。此時進度條爲0%：
  

這時候發現stroke-dasharray填充是從3點鐘位置開始的，因此就讓內圓環旋轉-90度：

.demo2{
    transform-origin: center;
    transform: rotate(-90deg);
}

• JS控制內圓環的stroke-dasharray的值來控制內圓環第一段繪製紅色的長度

var demo2 =  document.querySelector("#J_demo2");
var btn1 = document.querySelector("#J_btn_1");
var btn2 = document.querySelector("#J_btn_2");

var circleLength = Math.floor(2 * Math.PI * demo2.getAttribute("r"));

window.onload = rotateCircle;

btn2.onclick = rotateCircle;
function rotateCircle () {
    var val = parseFloat(btn1.value).toFixed(2);
    val = Math.max(0,val);
    val = Math.min(100,val);
    demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000");
}

SVG 實現圓環進度條