效果图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>svg 圆形进度条</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, "微软雅黑", "宋体", sans-serif;
background: #e6eaeb;;
}
.alert-box {
position: relative;
display: block;
286px;
margin: 96px auto 0;
padding: 180px 85px 22px;
text-align: center;
color: #fff;
border-radius: 10px 10px 0 0;
background: #fff;
box-shadow: 5px 9px 17px rgba(102, 102, 102, .75);
}
.alert-box p {
margin: 0;
}
.alert-circle {
position: absolute;
top: -50px;
left: 130px;
}
.alert-sec-circle {
transition: stroke-dashoffset .2s linear;
/* stroke-dashoffset: -440; */
stroke-dasharray: 735;
}
.alert-sec-unit {
font-size: 34px;
}
#circle-txt {
position: absolute!important;
bottom: 137px;
left: 172px;
102px;
font-size: 40px;
text-align: center;
}
</style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
</head>
<body>
<div id="js-alert-box" class="alert-box">
<svg class="alert-circle" width="180" height="180">
<defs>
<lineargradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F2412A"></stop>
<stop offset="100%" stop-color="#FFD000"></stop>
</lineargradient>
</defs>
<circle cx="90" cy="90" r="78" fill="#3BA7F3" stroke="url(#linear)" stroke-width="8"></circle>
<circle cx="90" cy="90" id="js-sec-circle" class="alert-sec-circle" r="78" fill="transparent" stroke="#F4F1F1" stroke-width="9" transform="rotate(-90 90 90)"></circle>
</svg>
<div id="circle-txt">
100%
</div>
</div>
</body>
<script>
setProgress(70);
function setProgress(num, r = 78) {
document.getElementById('circle-txt').innerHTML = num + '%';
document.getElementById('js-sec-circle').setAttribute('stroke-dashoffset', -2 * Math.PI * r * num / 100);
}
</script>
</html>
致谢参考
敬请参考 https://github.com/jasonChen2014/svgProgessBar/blob/master/index.html