[CSS/JS]圆形不封闭进度条实现

圆形不封闭进度条实现

[CSS/JS]圆形不封闭进度条实现_第1张图片[CSS/JS]圆形不封闭进度条实现_第2张图片[CSS/JS]圆形不封闭进度条实现_第3张图片
如上图所示,如何实现这种圆形且不封闭的进度条
我的思路是:
首先建立一个div装这个进度条,并将其旋转-120度
[CSS/JS]圆形不封闭进度条实现_第4张图片
将其分为两个相等的div
[CSS/JS]圆形不封闭进度条实现_第5张图片
两边各画一个圆,将圆加上border变成圆环,将一半的圆环颜色置为透明,在外部容器修改成溢出隐藏overflow: hidden;通过旋转达到意图效果,实现进度条底色的显示
[CSS/JS]圆形不封闭进度条实现_第6张图片
再在两边绘制两个圆环,通过让一半圆环透明变成两个半圆环,颜色换成进度条颜色,再经过旋转达到初始位置,左半圆是红色,右半圆是黄色,排布如下图
[CSS/JS]圆形不封闭进度条实现_第7张图片
在输入数值后,通过js的运算判断,两个圆环旋转达到以下效果
[CSS/JS]圆形不封闭进度条实现_第8张图片[CSS/JS]圆形不封闭进度条实现_第9张图片
[CSS/JS]圆形不封闭进度条实现_第10张图片
将两种圆环的颜色换成相同颜色后,就完美实现效果
[CSS/JS]圆形不封闭进度条实现_第11张图片[CSS/JS]圆形不封闭进度条实现_第12张图片[CSS/JS]圆形不封闭进度条实现_第13张图片
源代码如下





  圆形未封闭进度条



  

你可能感兴趣的:(CSS)