HTML + CSS 实现矩形/圆形进度条效果 - SVG

本文记录通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果，效果图如下：（实际运行效果是进度条从 0 过渡到一个目标值比如 100%）

 下面直接上代码：

圆形

HTML：线性渐变色的代码可以不加，非必须

  <svg class="box" width="200" height="200">
    
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(57, 242, 218);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(6, 166, 230);stop-opacity:1" />
        <stop offset="100%" style="stop-color:hsl(223, 92%, 50%);stop-opacity:1" />
      linearGradient>
    defs>
    
    <circle class="progress" cx="100" cy="100" r="60" fill="transparent" stroke="url(#grad1)" stroke-width="10">circle>
    
    <text class="text" x="100" y="100" fill="#0c4ef5" text-anchor="middle" alignment-baseline="middle">text>
  svg>

 CSS：仅处理了 svg 的位置而已，整个 CSS 都非必须，可以不写

JavaScript：主要实现进度条“跑起来”的效果，原理就是动态更新圆形的 stroke-dashoffset 值

矩形

HTML：线性渐变色的代码可以不加，非必须

<svg class="box" width="800" height="20">
    
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(57, 242, 218);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(6, 166, 230);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(12, 78, 245);stop-opacity:1" />
      linearGradient>
    defs>
    
    <rect class="rect" width="0" height="20" rx="5" ry="5" fill="url(#grad1)">rect>
    <text class="text" x="400" y="12" fill="red" text-anchor="middle" alignment-baseline="middle">0%text>
  svg>

CSS：核心代码是给 box 加一个背景色和内部矩形同样的圆角

JavaScript：核心原理就是动态给矩形的 width 赋值可以百分比

源码

以上就是使用 HTML + CSS +少量的原生 JS 实现圆形、矩形进度条效果的示例代码了

源码地址：progress-demo: 通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果项目源码

 更多关于 SVG 的教程：菜鸟教程-SVG教程