-
效果圖
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;
/* 進(jìn)度條的顏色處理 */
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%;
/* 這個旋轉(zhuǎn)的角度 是 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>
<!-- 這里修改進(jìn)度條的數(shù)值, -->
<!-- 你只需要設(shè)置 --progress的數(shù)值就是可以的 ,last的數(shù)據(jù)你不需要管 -->
<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>
- 優(yōu)化動態(tài)圓環(huán)如下，如果在VUE中，可以動態(tài)渲染進(jìn)度
<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>
