当前位置: 首页 > news >正文

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

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

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

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

.circleProgress{

width: 160px;

height: 160px;

border:20px solid transparent;

border-radius: 50%;

position: absolute;

top:0;

-webkit-transform: rotate(45deg);

}

1f9e57a0f1f7

image.png

为什么要旋转45°,可以自己去审查元素并且改变度数看看效果。

第一个半圆实现了。接下来实现左边的半圆

代码和右边的相反即可

.leftcircle{

border-bottom:20px solid green;

border-left:20px solid green;

left:0;

}

1f9e57a0f1f7

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

相关文章:

  • 在css中设置箭头,使用CSS在工具提示中添加箭头
  • ajax table 传参数,如何通过AJAX调用jQuery DataTable传递额外参数
  • validate成功后ajax提交,jquery validate和jquery form 插件组合实现验证表单后AJAX提交...
  • 酒店系统服务器推荐,五星级酒店有哪些不易发现的免费服务?
  • java 二叉树的高度_Java
  • 语言专升本必背代码_立克分享|专升本考试语文必背知识点,绝对的干货!
  • c语言 编程输出如下n阶蛇形矩阵_C语言 | 函数实现I love you
  • 乐高机器人投篮编程_乐高机器人WeDo编程和EV3编程课能学到什么
  • 学习java后端路线心得_我最推荐的一张Java后端学习路线图,Java工程师必备
  • c语言打印乱码_c语言输出特殊字符乱码的示例
  • 台电p10hd拆解_台电官方论坛 - P10HD优缺点详评及root指南 - 平板笔记本
  • uniapp小程序让页面滚动到底部_uniApp / 小程序实现一个view滚动到一定高度置顶显示...
  • vc读取北通手柄按键_《Spiritfarer》北通宙斯手柄按键功能介绍 手柄控制按键有哪些?...
  • ie print没反应_在IE9下,window.print()不弹出打印对话框的解决办法
  • 编程中的蛇形填空问题_邹军:最实用的数控编程方法,让你编写程序就像做填空题一样简单...