transform rotate实现环形进度条
一、做好效果如下
二、思路分析
主要实现方法：
transform: rotate(xxdeg)
- 实现圆环，如果单通过一个圆环来实现，则整个圆环上的颜色无法实现部分动，这时候就需要遮罩
- 左右各一个矩形区域，设置 overflow: hidden; 里面放一个圆，两个举行的总宽度为一个圆的直径
- 每个矩形展示一半圆，需要将右边圆的位置进行偏移，以展示另一半
- 通过一个矩形遮住一半圆的方案，交替旋转两遍的圆
- 给圆形上下左右的边分别设置宽度及颜色，一半加载前的颜色，一半加载完的颜色，这里注意四个边宽度要一致，否则就不是正圆了
- 给圆形默认设 45 度，将颜色分界线刚好放在正中间
- 计算度数与进度的关系，通过 js 动态设置 transform
三、简易代码
<!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>实际使用换成真实进度。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录