css+js 实现圆圈进度条
实现思路： 设置两个圆，用overflow：hidden各隐藏一半，使用绝对定位让一个位于左边半圆，一个位于右边半圆。然后使用transform:rotate 来旋转使得半圆动起来。
使用js函数传入两个参数，一个启始百分比和一个结束百分比，来控制进度的开始和停止。
HTML代码
<body><div class="contain"><div class="left"><div class="left-circle">div>div><div class="right"><div class="right-circle">div>div><div class="mask"><div class="number">div>div>div>
body>
CSS样式
JS代码：
function go (start, end) {const circleLeft = document.querySelector('.left-circle')const circleRight = document.querySelector('.right-circle')const number = document.querySelector('.number')function formatDegreeLeft (percent) {// 封装左边圆角度return `rotate(${-225 + (360 / 100 * percent)}deg)` // 旋转角度要与定时器相对应，我这使用的是6s转动360度}function formatDegreeRight (percent) {// 封装右边圆角度return `rotate(${-45 + (360 / 100 * percent)}deg)`}function setRotateLeft (node, percent) {// 设置旋转左圆的角度node.style.transform = formatDegreeLeft(percent)}function setRotateRight (node, percent) {// 设置旋转右圆的角度node.style.transform = formatDegreeRight(percent)}let percent = start //百分比let t = setInterval(() => {percent++if (percent >= 0 && percent <= 50) { //如果百分比在50以内旋转右边圆setRotateRight(circleRight, percent)} else if (percent > 50 && percent <= 100) { //如果百分比在50以上，固定右半边圆和旋转左半边圆circleRight.style.transform = 'rotate(135deg)'setRotateLeft(circleLeft, percent)}number.textContent = percent + '%'if (percent >= end) {clearInterval(t)if(percent>=100){number.textContent = '加载完成'}}}, 60)}go(60, 90) // 进度60 到进度90
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！