返回

完美实现环形进度条，前端小菜鸟也可以成为大牛

前端

使用SVG构建精美的环形进度条：全方位指南

什么是环形进度条？

环形进度条是一种直观的视觉元素，用于展示任务的完成情况或数据的进度。它们在管理仪表板中无处不在，用来呈现各种指标的完成率，如任务完成率、项目进度等。

使用SVG实现环形进度条的优势

在实现环形进度条时，SVG（可缩放矢量图形）脱颖而出，因为它提供了以下优点：

  • 矢量图形： SVG是矢量图形，这意味着它们可以无限缩放而不会失真。
  • 轻量级： SVG文件通常比其他图像文件类型更小。
  • 动画支持： SVG支持动画，允许您使用CSS或JavaScript创建动态效果。

逐步指南

遵循这些步骤，使用SVG创建自己的环形进度条：

1. 创建一个SVG元素

<svg width="100%" height="100%" viewBox="0 0 100 100"></svg>

2. 创建一个圆形路径

<path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" stroke="#000" stroke-width="10" fill="none"></path>

3. 创建一个圆形蒙版

<mask id="mask">
  <circle cx="50" cy="50" r="40" fill="#fff"></circle>
</mask>

4. 将蒙版应用于路径

<path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" stroke="#000" stroke-width="10" fill="none" mask="url(#mask)"></path>

5. 添加动画效果

@keyframes progress {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

path {
  animation: progress 2s linear infinite;
}

代码示例

下面是一个完整的代码示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <svg width="100%" height="100%" viewBox="0 0 100 100">
    <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" stroke="#000" stroke-width="10" fill="none"></path>
    <mask id="mask">
      <circle cx="50" cy="50" r="40" fill="#fff"></circle>
    </mask>
    <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" stroke="#000" stroke-width="10" fill="none" mask="url(#mask)"></path>
  </svg>

  <script>
    var path = document.querySelector('path');

    var progress = 0;

    setInterval(function() {
      progress += 1;

      if (progress > 100) {
        progress = 0;
      }

      path.style.strokeDashoffset = 400 - (4 * progress);
    }, 100);
  </script>
</body>
</html>

常见问题解答

  • Q：如何自定义环形进度条的样式？

    • A： 可以更改stroke、stroke-width、fill和mask属性来自定义进度条的样式。

  • Q：如何使用JavaScript控制进度条？

    • A： 使用strokeDashoffset属性设置进度条的进度，并使用setInterval()函数更新进度。

  • Q：如何添加文本标签？

    • A： 使用<text>元素在SVG中添加文本标签，并使用CSS进行样式设置。

  • Q：是否可以创建动画进度条？

    • A： 是的，可以使用CSS动画或JavaScript动画创建动画进度条。

  • Q：可以在不同平台上使用SVG环形进度条吗？

    • A： 是的，SVG环形进度条在所有现代浏览器上兼容。