svg 圆环进度条

世界太过浮夸

已于 2023-03-13 11:06:10 修改

阅读量259

点赞数

分类专栏： css 文章标签： javascript 前端

于 2023-03-13 11:04:51 首次发布

本文链接：https://blog.csdn.net/u012761229/article/details/129488246

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该代码示例展示了如何用SVG创建一个圆环，并通过JavaScript动态更新其填充进度，模拟进度条效果。圆环的半径、颜色和动画由CSS和JS控制，利用stroke-dasharray属性实现动画，并通过setInterval函数每秒更新当前时间以刷新进度。

摘要由CSDN通过智能技术生成

                <svg width="36px" height="36px" viewbox="0 0 36 36">
                    <circle cx="18" cy="18" r="15" stroke-width="5" stroke="#049481" fill="none" stroke-linecap="round"></circle>
                    <circle cx="18" cy="18" r="15" stroke-width="5" stroke="#05EBCF" fill="none" transform="matrix(0,-1,1,0,0,36)" stroke-dasharray="0 1069" stroke-linecap="round"></circle>
                </svg>

cx - 圆心x轴坐标，默认为0。
cy - 圆心y轴坐标，默认为0。
r - 圆的半径。

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

		var currentTime = 0; //当前时间 
		var freshenTime=1000*60;//1分钟后刷新数据
        setInterval(function () {
            if (currentTime === freshenTime) {
                currentTime = 0;
            }
            var circle = document.querySelectorAll("circle")[1];
            var percent = currentTime / freshenTime, perimeter = Math.PI * 2 * 15;//计算圆环的周长
            circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1 - percent));
            currentTime += 1000;
        }, 1000)