<svg width="230" height="230" viewBox="0 0 230 230" transform="rotate(90),scale(-1,1)">
//进度条渐变色
<defs>
<linearGradient id="orange" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F34D4D"/>
<stop offset="100%" stop-color="#F27D31"/>
</linearGradient>
</defs>
//进度条渐变
//外层圆
<circle cx="115" cy="115" r="50" fill="none" stroke="#f7f7f7" stroke-width="30" />
//外层圆
//内容圆
<circle class="test" cx="115" cy="115" r="50" fill="none" stroke="url(#orange)" stroke-width="12" stroke-dasharray="314.1592653589793" stroke-dashoffset="31.41592653589793" stroke-linecap="round" />
//内层圆
</svg>
svg实现圆形进度条总结
stroke-dasharray:设置实线和虚线的宽度
stroke-dashoffset:实线虚线绘制的起点距路径开始的距离
stroke-dasharray 我们可以设置成圆的周长也就是 2πr
stroke-dashoffset 我们可以设置成进度条空白部分的周长 2πr*(1- percent)
是不是很简单!