svg实现环形进度条

先看效果图 25%的环形进度

image.png

利用 SVG circle 实现环形进度条

1.cx 和 cy 属性定义圆点的 x 和 y 坐标
2.r 属性定义圆的半径
3.stroke-width属性指定了圆的轮廓宽度
4.stroke-dasharray用于创建虚线，之所以后面跟的是array的，是因为值其实是数组,一个参数时：其实是表示虚线长度和每段虚线之间的间距,两个参数或者多个参数时：一个表示长度，一个表示间距
如：stroke-dasharray = '10' 表示：虚线长10，间距10，然后重复虚线长10，间距10
如：stroke-dasharray = '10, 5' 表示：虚线长10，间距5，然后重复虚线长10，间距5
如：stroke-dasharray = '20, 10, 5' 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环

实现思路就是：
1：一个circle当做背景圆
1：另外一个圆设置进度stroke-dasharray虚线长度等于或者小于当前圆的周长

circle.gif

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
        <circle fill="transparent" class="pie-bg" stroke-width="1" cx="25" cy="25" r="20"></circle>
        <circle fill="transparent" class="pie-bar" stroke-width="1" cx="25" cy="25" r="20"
            style="stroke-dasharray: 12.5664, 125.664;"></circle>
</svg>

        svg {
            vertical-align: middle;
            width: 150px;
            height: 150px;
        }

        .pie-bg {
            stroke: #ff3300;
            opacity: .3;
        }

        .pie-bar {
            stroke: #ff3300;
        }

        circle {
            stroke-dashoffset: 0;
            transform: rotate(-90deg);
            transform-origin: center;
            transition: all .2s;
            stroke: currentColor;
            z-index: 2;
        }

js动态控制进度

        var pieBar = document.querySelector('.pie-bar');
        var pathLen = 40 * Math.PI;//圆的周长
        var percent = 25;//占百分比
        pieBar.style.strokeDasharray = pathLen * percent / 100 + " " + pathLen;

svg实现环形进度条

推荐阅读更多精彩内容