![[CSS/JS]圆形不封闭进度条实现](https://sm.tqys.net/uploadfile/img/2020/04/26/7bb6013c1b4b29bb5fa5d0ade0d0ca98.jpg)
圆形不封闭进度条实现
如上图所示，如何实现这种圆形且不封闭的进度条
我的思路是：
首先建立一个div装这个进度条，并将其旋转-120度
将其分为两个相等的div
两边各画一个圆，将圆加上border变成圆环，将一半的圆环颜色置为透明，在外部容器修改成溢出隐藏overflow: hidden;通过旋转达到意图效果，实现进度条底色的显示
再在两边绘制两个圆环，通过让一半圆环透明变成两个半圆环，颜色换成进度条颜色，再经过旋转达到初始位置，左半圆是红色，右半圆是黄色，排布如下图
在输入数值后，通过js的运算判断，两个圆环旋转达到以下效果
将两种圆环的颜色换成相同颜色后，就完美实现效果
源代码如下
<!DOCTYPE html><html><head><title>圆形未封闭进度条</title></head><body><div class="container"><div class="progress"><div class="wrapper right"><div class="circle rightcircle-box"></div><div class="circle rightcircle" id="right"></div></div><div class="wrapper left"><div class="circle leftcircle-box"></div><div class="circle leftcircle" id="left"></div></div></div><div class="input"><input type="text" id="num"><button id="btn">点击</button></div><p id="score"></p></div><script type="text/javascript">function circleOfScore(index) {var score = index ? index : 0;var right = 100 * 180 / 270;var left = 100 - right;var rightDeg;var leftDeg;var rightCircle = document.getElementById("right");var leftCircle = document.getElementById("left");var scorenum = document.getElementById("score");scorenum.innerHTML = index;if (score <= right) {rightDeg = score / right * 180 - 135;leftDeg = -135;} else if (score < 100) {rightDeg = 45;leftDeg = (score - right) / 100 * 135 - 135;} else {rightDeg = 45;leftDeg = -75;}rightCircle.style.transform = 'rotate(' + rightDeg + 'deg)';leftCircle.style.transform = 'rotate(' + leftDeg + 'deg)';}var btn = document.getElementById("btn");btn.onclick = function() {var num = document.getElementById("num").value;circleOfScore(num);}</script><style type="text/css">/* 圆环 */.container {width: 475px;height: 600px;}.progress {position: relative;width: 400px;height: 400px;bottom: -40px;top: 206px;left: 268px;transform: rotate(-120deg);}.progress .wrapper {width: 200px;height: 400px;position: absolute;top: 0;overflow: hidden;}.progress .left {left: 0;}.progress .right {right: 0;}.progress .circle {width: 384px;height: 384px;border: 8px solid transparent;border-radius: 50%;position: absolute;top: 0;transform: rotate(-135deg);}.progress .rightcircle-box {border-top: 8px solid #99edd1;border-right: 8px solid #99edd1;border-bottom: 8px solid transparent;border-left: 8px solid transparent;right: 0;transform: rotate(45deg);}.progress .leftcircle-box {border-bottom: 8px solid #99edd1;border-left: 8px solid #99edd1;border-top: 8px solid transparent;border-right: 8px solid transparent;left: 0;transform: rotate(-75deg);}.progress .rightcircle {border-top: 8px solid yellow;border-right: 8px solid yellow;animation: mymove 5s infinite;right: 0;}.progress .leftcircle {border-bottom: 8px solid yellow;border-left: 8px solid yellow;left: 0;}p {position: absolute;z-index: 3;top: 257px;left: 240px;width: 475px;font-size: 81px;text-align: center;}.input {position: absolute;top: 560px;left: 405px;}.input input {width: 100px;height: 60px;font-size: 40px;}.input button {height: 50px;width: 80px;}</style></body></html>
如果觉得《[CSS/JS]圆形不封闭进度条实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
