首先实现一个静态的圆形进度条
他的实现其实就是两个半圆，然后通过旋转半圆的度数来达到整个圆形的效果
先来看看如何实现一个半圆
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
image.png
为什么要旋转45°，可以自己去审查元素并且改变度数看看效果。
第一个半圆实现了。接下来实现左边的半圆
代码和右边的相反即可
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
}
image.png
接下来就要实现动画效果了。
先让右半圆弧旋转180度，再让左半圆弧旋转180度，这样，两个半圆弧由于先后都全部溢出而消失了
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(45deg);
}
50%,100%{
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(45deg);
}
100%{
-webkit-transform: rotate(225deg);
}
}
这样就完成了。 要想实现计时的效果只需要修改一下两个半圆的起始度数，和动画里的度数即可。
接下来试着用js来实现动态的计时。
function action() {
//先拿到两个半圆
let left = document.getElementById('left')
let right = document.getElementById('right')
let time = 5000 进度条的总时间，可以是一个变量。
let sj = 20 拟定一个运动间隔时间，就是多久动一次
let dushu = 360 / (time / sj) 通过总度数除以(总时间除以时间间隔)得到每次运动多少度数
let rightchushudushu = -135 右半圆的初始度数，这个度数刚好被隐藏掉
let leftchushidushu = -135 同上
let cc = setInterval(() => {
console.log(new Date)
if (rightchushudushu >= 45) {
if (leftchushidushu >= 45) {
clearInterval(cc)
} else {
leftchushidushu += dushu
if (leftchushidushu > 45) {
leftchushidushu = 45
right.style.cssText = `-webkit-transform: rotate(${leftchushidushu}deg);`
}
right.style.cssText = `-webkit-transform: rotate(${leftchushidushu}deg);`
}
} else {
rightchushudushu += dushu
if (rightchushudushu > 45) {
rightchushudushu = 45
} else {
left.style.cssText = `-webkit-transform: rotate(${rightchushudushu}deg);`
}
}
}, sj)
}
总时间需要换算成定时器的时间格式，比如60s 就是60000. 千万不要直接用总度数去除以总时间。这样算出来的距离，这样计算出来的结果。进度条动起来就会一顿一顿，没有那么丝滑了。自己去拟定一个运动间隔时间。然后通过这个时间去计算每次运动的距离。这样实现的效果就会很顺畅，不会一顿一顿。
定时器中的代码有点冗余了，可以自行更改。这里投一下懒，就不改了。说一下里面需要注意的点。
在每次累加度数时，需要去判断一下当前度数是不是大于或等于45度了。如果是，那就直接将度数设置成45度。因为在累加的过程中。计算出来的度数不是整数，有可能会超过45度。这样半圆就会多移动一点距离。整个进度条就会有瑕疵。
如果觉得《js css 实现进度条 css+js实现圆形进度条》对你有帮助，请点赞、收藏，并留下你的观点哦！
