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

2021-11-30 18:33:35 阅读：347 来源： 互联网

标签：进度条渐变 stroke 描边 dashoffset path 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的属性值就可以让渐变描边一点一点地出现，于是一个彩色渐变圆环进度条效果就实现了。

标签：进度条,渐变,stroke,描边,dashoffset,path,css,圆环
来源： https://blog.csdn.net/weixin_41192489/article/details/121639313

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

实现原理