主要实现方法:
transform: rotate(xxdeg)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="wclassth=device-wclassth, initial-scale=1.0"
/>
<title>环形进度条</title>
<style>
.container {
padding: 20px;
}
.circle-wrap {
width: 200px;
height: 200px;
box-sizing: border-box;
position: relative;
}
.rect-left,
.rect-right {
width: 100px;
height: 200px;
overflow: hidden;
}
.rect-left {
position: absolute;
top: 0;
left: 0;
}
.rect-right {
position: absolute;
top: 0;
left: 100px;
}
.circle-left,
.circle-right {
width: 160px;
height: 160px;
border-radius: 50%;
}
.circle-left {
/* 四个方向都要设置相同粗细及颜色,否则不是正圆 */
border-top: 20px solid rgb(244, 105, 195);
border-right: 20px solid rgb(244, 105, 195);
border-bottom: 20px solid rgb(239, 197, 204);
border-left: 20px solid rgb(239, 197, 204);
/* 默认将进度条颜色归 0 */
transform: rotate(45deg);
}
.circle-right {
border-top: 20px solid rgb(239, 197, 204);
border-right: 20px solid rgb(239, 197, 204);
border-bottom: 20px solid rgb(244, 105, 195);
border-left: 20px solid rgb(244, 105, 195);
margin-left: -100px;
/* 默认将进度条颜色归 0 */
transform: rotate(45deg);
}
/* 进度文字 */
.progress-text {
width: 200px;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="circle-wrap">
<div class="rect-left">
<div class="circle-left"></div>
</div>
<div class="rect-right">
<div class="circle-right"></div>
</div>
</div>
<div class="progress-text"></div>
</div>
<script>
let progress = 0;
let circleLeft = document.querySelector(".circle-left");
let circleRight = document.querySelector(".circle-right");
let progressText = document.querySelector(".progress-text");
let timer = setInterval(() => {
progressText.innerHTML = `当前进度:${progress}%`;
if (progress === 100) {
clearInterval(timer);
}
if (progress <= 50) {
// 当进度小于等于 50,旋转右侧圆环
circleRight.style.transform = `rotate(${
45 + (180 / 50) * progress
}deg)`;
} else {
// 否则,旋转左侧圆环 180/50 代表 半个圆代表 50%进度
circleLeft.style.transform = `rotate(${
45 + (180 / 50) * (progress - 50)
}deg)`;
}
progress++;
}, 100);
</script>
</body>
</html>
实际使用换成真实进度。