transform rotate实现环形进度条
一、做好效果如下
二、思路分析
主要实现方法：
transform: rotate(xxdeg)
- 实现圆环，如果单通过一个圆环来实现，则整个圆环上的颜色无法实现部分动，这时候就需要遮罩
- 左右各一个矩形区域，设置 overflow: hidden; 里面放一个圆，两个举行的总宽度为一个圆的直径
- 每个矩形展示一半圆，需要将右边圆的位置进行偏移，以展示另一半
- 通过一个矩形遮住一半圆的方案，交替旋转两遍的圆
- 给圆形上下左右的边分别设置宽度及颜色，一半加载前的颜色，一半加载完的颜色，这里注意四个边宽度要一致，否则就不是正圆了
- 给圆形默认设 45 度，将颜色分界线刚好放在正中间
- 计算度数与进度的关系，通过 js 动态设置 transform
三、简易代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0" /> <title>环形进度条</title> <style> .container { padding: 20px; } .circle-wrap { width: 200px; height: 200px; box-sizing: border-box; position: relative; } .rect-left, .rect-right { width: 100px; height: 200px; overflow: hidden; } .rect-left { position: absolute; top: 0; left: 0; } .rect-right { position: absolute; top: 0; left: 100px; } .circle-left, .circle-right { width: 160px; height: 160px; border-radius: 50%; } .circle-left { /* 四个方向都要设置相同粗细及颜色，否则不是正圆 */ border-top: 20px solid rgb(244, 105, 195); border-right: 20px solid rgb(244, 105, 195); border-bottom: 20px solid rgb(239, 197, 204); border-left: 20px solid rgb(239, 197, 204); /* 默认将进度条颜色归 0 */ transform: rotate(45deg); } .circle-right { border-top: 20px solid rgb(239, 197, 204); border-right: 20px solid rgb(239, 197, 204); border-bottom: 20px solid rgb(244, 105, 195); border-left: 20px solid rgb(244, 105, 195); margin-left: -100px; /* 默认将进度条颜色归 0 */ transform: rotate(45deg); } /* 进度文字 */ .progress-text { width: 200px; text-align: center; margin-top: 10px; } </style> </head> <body> <div class="container"> <div class="circle-wrap"> <div class="rect-left"> <div class="circle-left"></div> </div> <div class="rect-right"> <div class="circle-right"></div> </div> </div> <div class="progress-text"></div> </div> <script> let progress = 0; let circleLeft = document.querySelector(".circle-left"); let circleRight = document.querySelector(".circle-right"); let progressText = document.querySelector(".progress-text"); let timer = setInterval(() => { progressText.innerHTML = `当前进度：${progress}%`; if (progress === 100) { clearInterval(timer); } if (progress <= 50) { // 当进度小于等于 50，旋转右侧圆环 circleRight.style.transform = `rotate(${ 45 + (180 / 50) * progress }deg)`; } else { // 否则，旋转左侧圆环 180/50 代表 半个圆代表 50%进度 circleLeft.style.transform = `rotate(${ 45 + (180 / 50) * (progress - 50) }deg)`; } progress++; }, 100); </script> </body> </html>
实际使用换成真实进度。
转载请注明出处：https://www.cnblogs.com/beileixinqing/p/16738059.html
