项目中需要实现圆形进度条:找到了两种方法(动态需要配合js实现)
- 利用css3中的tranform属性
- 利用svg实现(可以实现炫酷的效果)
方法1: css transform
<style>
.circle {
width: 100px;
height: 100px;
background-color: #eee;
margin: 100px auto;
position: relative;
border-radius: 50%;
}
.left,
.right {
overflow: hidden;
width: 50px;
height: 100px;
position: absolute;
opacity: 0.5;
}
.left .left-circle,
.right .right-circle {
width: 50px;
height: 100px;
background: red;
}
.left .left-circle {
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
/* 修改旋转的中心点 */
transform-origin: right center;
transform: rotate(180deg);
/* animation: progress1 2s linear forwards; */
animation-delay: 2s;
}
.right .right-circle {
background: red;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
transform-origin: left center;
transform: rotate(-180deg);
}
.right {
right: 0;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 20px;
background-color: white;
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
line-height: 80px;
}
</style>
<body>
<div class="circle">
<div class="left">
<div class="left-circle"></div>
</div>
<div class="right">
<div class="right-circle"></div>
</div>
<div class="inner">100%</div>
</div>
<script type="text/javascript">
let innerDom = document.querySelector('.inner');
let leftCircle = document.querySelector('.left-circle');
let rightCircle = document.querySelector('.right-circle');
let timer = null;
let loader = 0; // 当前数据
let total = 1500;
let limit = 40;
// 通过设置定时器模拟请求,动态获取数据
setInterval(() => {
let num = Number((loader / total) * 100).toFixed(1);
let deg = Number((loader / total) * 360).toFixed(0);
if (num > limit) {
clearInterval(timer)
} else {
loader++;
innerDom.textContent = num + '%';
if (deg > 180) {
leftCircle.style.transform = `rotate(${deg}deg)`
} else {
rightCircle.style.transform = `rotate(-${180 - deg}deg)`
}
}
}, 1);
</script>
</body>
方法2: svg
<style>
.text {
text-anchor: middle;
dominant-baseline: middle
}
body {
text-align: center;
}
</style>
<body>
<svg xmln="http://www.w3.org/200/svg" height="700" width="700">
<!-- 设置底色的圆环 -->
<circle cx="350" cy="350" r="300" fill="none" stroke="gray" stroke-width="60" stroke-linecap="round"></circle>
<!-- 设置进度条 -->
<circle class="progress" transform="rotate(-90, 350, 350)" cx="350" cy="350" r="300" fill="none" stroke="red"
stroke-width="60" stroke-linecap="round"></circle>
<!-- 文本 -->
<text class="text" x="350" y="350" font-size="180" fill="red">36</text>
</svg>
<script type="text/javascript">
var progressDom = document.querySelector('.progress');
var textDom = document.querySelector('.text');
function rotateCircle(persent) {
var circleLength = Math.floor(2 * Math.PI * parseFloat(progressDom.getAttribute('r')));
var value = persent * circleLength / 100;
// red: rgb(255, 0, 0) , blue: rgb(0, 191, 255)
var red = 255 + parseInt((0 - 255) / 100 * persent);
var green = 0 + parseInt((191 - 0) / 100 * persent);
var blue = 0 + parseInt((255 - 0) / 100 * persent);
progressDom.setAttribute('stroke-dasharray', value + ",10000");
progressDom.setAttribute('stroke', `rgb(${red}, ${green}, ${blue})`);
textDom.innerHTML = persent + '%';
textDom.setAttribute('fill', `rgb(${red}, ${green}, ${blue})`)
}
let limit = 50;
let num = 0;
setInterval(() => {
num++;
if (num > limit) {
return;
}
rotateCircle(num)
}, 30);
</script>
</body>