-
效果图
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.progress {
position: relative;
width: 100px;
height: 100px;
/* 进度条的颜色处理 */
background: conic-gradient(
#7095ff,
#1752f7 var(--progress),
#ccc var(--progress),
#ccc
);
border-radius: 50%;
position: relative;
transform: rotateY(0);
}
/* 起点的弧度 */
.progress::before {
position: absolute;
display: inline-block;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #7095ff;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.end {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
/* 这个旋转的角度 是 360*progress(百分比 /100) */
/* 例子 360 * 0.7 = 252 */
transform: rotate(252deg);
}
/* 终点的弧度 */
.end::before {
position: absolute;
display: inline-block;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #1752f7;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: #fff;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 这里修改进度条的数值, -->
<!-- 你只需要设置 --progress的数值就是可以的 ,last的数据你不需要管 -->
<div class="progress" style="--progress: 70%; --last: 20%">
<div class="son"></div>
<div class="end"></div>
</div>
<script>
let a = setInterval(() => {
console.log(123);
}, 1000);
</script>
</body>
</html>
- 优化动态圆环如下，如果在VUE中，可以动态渲染进度
<div class="progress" style="--progress: 70%; --last: 20%" :style="{'--progress': progress+'%'}">
<div class="son"></div>
<div class="end" :style="{transform:'rotate('+ 360*(progress/100) +'deg)'}"></div>
</div>
