使用SVG+JS实现环形进度条

最新推荐文章于 2024-05-31 10:29:13 发布

AC它真的很香

最新推荐文章于 2024-05-31 10:29:13 发布

阅读量564

点赞数 2

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

本文链接：https://blog.csdn.net/Erin_jwx/article/details/125022374

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

示例运行效果

整体思路：
1.使用SVG绘制圆环，以及内部百分比的文字
2.设置圆环的偏移属性，使其默认长度从0开始
3.通过定时器，每隔一段时间修改偏移属性，改变圆环长度，并修改文字的数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle{
            fill: none;
            stroke:#4E9EED;
            stroke-width:8;
            /* 进度条填充一整个环形 */
            stroke-dasharray:502;
            /* dashoffset 为偏移量 正数为向逆时针偏移 负数为向顺时针位置偏移
				初始设为502时，进度条展示出的长度为0
			 */
            stroke-dashoffset:502; 
            stroke-linecap: round;
            /* 开口向上 */
            transform: rotate(-90deg);
            transform-origin: center;
            transform-box:fill-box;
        }
    </style>
</head>
<body>
    <svg width="300" height="300">
        <text class="text" x="100" y="100" style="text-anchor:middle">0%</text>
        <circle class="circle" cx="100" cy="100" r="80" ></circle>
    </svg>
    <script>
    	// 百分比初始值
        let p = 0;
        // 每50ms百分比+1
        let t = setInterval(()=>{
            setDegree()(p++)
        },50)
  
        function setDegree(){
        	// 获取所操作的元素
            let circleProgressBar = document.querySelector('.circle')
            let text = document.querySelector('.text')
            // 采用闭包方式，避免每次操作时重新获取dom
            return function(percent){
                if(percent<=100){
                	// 502为圆环的周长 502为一圈对应100% 由此计算传入percent时的值
                    circleProgressBar.style.strokeDashoffset = 502-(502/100)*percent
                    text.innerHTML = percent+'%'
                }
            }
        }
    </script>
</body>
</html>

AC它真的很香

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用SVG+JS实现环形进度条

示例运行效果整体思路：1.使用SVG绘制圆环，以及内部百分比的文字2.设置圆环的偏移属性，使其默认长度从0开始3.通过定时器，每隔一段时间修改偏移属性，改变圆环长度，并修改文字的数值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
复制链接

扫一扫

专栏目录