SVG实现圆环loading进度效果实例页面

效果：

拖我：

端点圆角：

代码：

HTML代码：

circle {
    -webkit-transition: stroke-dasharray .25s;
    transition: stroke-dasharray .25s;
}

HTML代码：

<svg width="440" height="440" viewbox="0 0 440 440">
    <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>
    <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>
<p>拖我：<input id="range" type="range" min="0" max="100" value="0" style="width:300px;"></p>
<p>端点圆角：<input id="switch" type="checkbox"></p>

JS代码：

var range = document.querySelector("#range");
var circle = [].slice.call(document.querySelectorAll("circle"));
range.addEventListener("change", function() {
    var percent = this.value / 100, perimeter = Math.PI * 2 * 170;
    circle[1].setAttribute('stroke-dasharray', perimeter * percent + " 1069");
});
var checkbox = document.getElementById('switch');
checkbox.addEventListener('click', function () {
    var checked = this.checked;
    circle.forEach(function (ele) {
        if (checked) {
            ele.setAttribute('stroke-linecap', 'round');
        } else {
            ele.removeAttribute('stroke-linecap');
        }
    });
});