js css 实现进度条,css+js实现圆形进度条

首先实现一个静态的圆形进度条

他的实现其实就是两个半圆，然后通过旋转半圆的度数来达到整个圆形的效果

先来看看如何实现一个半圆

.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度。这样半圆就会多移动一点距离。整个进度条就会有瑕疵。