svg实现简单的圆形进度条

<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）

是不是很简单！