css
<style>
.container {
width: 300px;
height: 300px;
margin: 100px auto;
}
.circle-progress-bar {
position: relative;
width: 100%;
height: 100%;
}
.circle-progress-bar div {
box-sizing: border-box;
}
.circle-progress-bar .title {
margin: 0;
text-align: center;
line-height: 300px;
}
.circle-progress-bar .wrapper {
position: absolute;
top: 0;
width: 150px;
height: 300px;
overflow: hidden;
}
.circle-progress-bar .wrapper.left-wrapper {
left: 0;
}
.circle-progress-bar .wrapper.right-wrapper {
right: 0;
}
.circle-progress-bar .wrapper .circle-bar {
position: absolute;
width: 300px;
height: 100%;
border: 30px solid transparent;
border-radius: 50%;
transform: rotate(-135deg);
}
.circle-progress-bar .left-wrapper .circle-bar {
left: 0;
border-bottom-color: orange;
border-left-color: orange;
}
.circle-progress-bar .right-wrapper .circle-bar {
right: 0;
border-top-color: orange;
border-right-color: orange;
}
</style>
html
<div class="container">
<div class="circle-progress-bar">
<h1 class="title">0%</h1>
<div class="wrapper left-wrapper">
<div class="circle-bar"></div>
</div>
<div class="wrapper right-wrapper">
<div class="circle-bar"></div>
</div>
</div>
</div>
js
<script>
let p = 0
const circleProgressBar = CircleProgressBar()
let timer = setInterval(() => {
circleProgressBar(++p, function () {
console.log('success')
})
}, 200)
function CircleProgressBar() {
const oLeftCircleBar = getCircleBar('left')
const oRightCircleBar = getCircleBar('right')
const title = document.querySelector('.circle-progress-bar .title')
return function (percent, successFn) {
if (percent > 0 && percent <= 50) {
setRotate(oRightCircleBar, percent)
}
if (percent > 50 && percent <= 100) {
setRotate(oLeftCircleBar, percent - 50)
}
if (percent > 0 && percent <= 100) {
title.innerText = percent + '%'
}
if (percent && percent == 100) {
typeof successFn == 'function' && successFn()
}
}
function fomatDegree(percent) {
return `rotate(${-135 + (360 / 100 * percent)}deg)`
}
function setRotate(node, percent) {
node.style.transform = fomatDegree(percent)
}
function getCircleBar(dir) {
return document.querySelector(`.circle-progress-bar .${dir}-wrapper .circle-bar`)
}
}
</script>