SVG圆形进度条

效果图:

        若不合适但是相似可以看后面进行自我调整

成品代码:         话不多说先上代码以供学习复用:

                   <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="50"
                      height="50"
                      viewBox="0 0 50 50"
                      style={{
                        width:  "0.8rem",
                        height:  "0.8rem",
                        marginTop: "0.1rem"
                      }}
                    >
                      <circle
                        fill="transparent"
                        className="pie-bg"
                        stroke-width="0.5"
                        cx="25"
                        cy="25"
                        r="20"
                      ></circle>
                      <circle
                        fill="transparent"
                        className="pie-bar"
                        stroke-width="0.5"
                        cx="25"
                        cy="25"
                        r="20"
                        style={{
                          strokeDasharray: (40 * Math.PI * 百分比) / 100 + " " + 40 * Math.PI,
                          stroke:  "#42e7fc"
                        }}
                      ></circle>
                    </svg>

实现逻辑:

         通过circle的特性创建出两层 一层为底色圈的背景颜色

另外一层为进行的百分比展示    具体实现想法如此

代码解析: svg参数:

     viewBox属性定义了 SVG 视口在用户空间中的位置和尺寸。

    width和height就不说了 看不懂建议去新学叭┗( ▔, ▔ )┛

    xmlns:命名空间声明  这个标签和它的子节点都属于标签的子标签也属于相同的命名空间

circle参数:(文档复制,有超链接可跳转查看详情)

cx

    圆心的 x 轴坐标。 值类型：<长度> | <百分比> ; 默认值：0; 动画：是的

cy

    圆心的 y 轴坐标。 值类型：<长度> | <百分比> ; 默认值：0; 动画：是的

r

    圆的半径。小于或等于零的值将禁用圆的渲染。 值类型：<长度> | <百分比> ; 默认值：0; 动画：是的

pathLength

    圆周的总长度，以用户单位表示。 值类型：<数字>；默认值：无；动画：是的

stroke-width:

    环形的粗细大小 要多粗都有只要你受得了ᕙ༼ ͝°益° ༽ᕗ

style

      strokeDasharray:

            通过你输入的百分比去运算出需要展示的

            (40 * Math.PI * 百分比) / 100 + " " + 40 * Math.PI,

    stroke:

            环形的颜色

自定义内容:

                  <div

                      style={{
                        color:"#42e7fc"
                      }}
                    >
                      <span>{schedule}%</span>
                    </div>