css 实现彩色渐变圆环进度条_css

<template>
  <svg width="440" height="440" viewBox="0 0 440 440">
    <defs>
      <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient">
        <stop offset="0%" stop-color="#e52c5c"></stop>
        <stop offset="100%" stop-color="#ab5aea"></stop>
      </linearGradient>
    </defs>
    <circle cx="220" cy="220" r="170" class="circle-track"></circle>
    <circle
      cx="220"
      cy="220"
      r="170"
      transform="rotate(-90 220 220)"
      class="circle-bar"
    ></circle>
    <text
      class="text"
      x="50%"
      y="50%"
      dominant-baseline="middle"
      text-anchor="middle"
    >
      90%
    </text>
  </svg>
</template>

<style scoped>circle {
  stroke-width: 50px;
  fill: none;
  stroke-dasharray: 1069px;
  /* 灰色进度槽 */
  stroke: #f0f1f5;
}
/* 渐变进度条 */
.circle-bar {
  /* stroke-dashoffset慢慢变小，进度条就会慢慢出现 */
  stroke-dashoffset: 106.9px;
  stroke: url(#gradient);
}</style>

改变stroke-dashoffset属性值，就能设置对应的进度效果

其中的1069px是圆环的周长，使用公式Length=Math.PI**2计算得来。由于圆形描边是从3点钟方向开始的，因此第二个<circle>元素设置了transform="rotate(-90220220)"逆时针旋转90度让描边从圆的顶部开始。

如果是不规则路径，则可以使用下面两行JavaScript代码获得路径的长度值：

var path = document.querySelector('path');
var length = path.getTotalLength();

实现原理

设置两个SVG<circle>元素，下层的<circle>元素使用灰色描边，作为进度槽；上层的<circle>元素设置为虚线描边，同时使用渐变进行描边填充。然后通过改变stroke-dashoffset的属性值就可以让渐变描边一点一点地出现，于是一个彩色渐变圆环进度条效果就实现了。