手把手教你，赋能组件力量，自己也能写出环形进度条

2023-10-20 22:02:52

环形进度条，在前端开发中，我们经常会遇到需要展示进度的情况，例如文件上传、页面加载、任务执行等。环形进度条作为一种直观、简洁的方式，可以帮助用户了解当前的进度情况，提升用户体验。那么，如何实现一个前端环形进度条组件呢？在本文中，我们将提供一个从零开始的逐步教程，带领你从基础概念到实际编码，打造出自己的环形进度条组件。

理解环形进度条

环形进度条是一种圆形图形，其内部通常被分成多个等分扇形，每个扇形代表着进度的一个阶段。进度条的填充程度可以通过改变扇形的角度来表示，从而直观地展示当前进度。

实现环形进度条

1. HTML结构

首先，我们需要创建一个基本的HTML结构来容纳环形进度条。可以创建一个<div>元素，并为其添加一个CSS类名，如“progress-circle”。在<div>元素内部，再创建一个<svg>元素，用于绘制环形进度条。

2. SVG绘图

在<svg>元素中，我们可以使用<path>元素来绘制环形进度条。<path>元素的d属性用于指定路径的形状，我们可以通过计算扇形的角度和半径来生成路径数据。

3. CSS样式

接下来，我们需要使用CSS来为环形进度条添加样式。首先，我们需要设置<svg>元素的宽高和位置。然后，我们可以使用stroke-dasharray和stroke-dashoffset属性来控制环形进度条的填充程度。

4. JavaScript交互

最后，我们需要使用JavaScript来控制环形进度条的填充程度。我们可以通过监听事件或使用定时器来更新进度条的填充程度。

完整代码

<div class="progress-circle">
  <svg 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-dasharray="251.2 251.2"
      stroke-dashoffset="251.2"
    />
  </svg>
</div>

.progress-circle {
  width: 100px;
  height: 100px;
  position: relative;
}

.progress-circle svg {
  width: 100%;
  height: 100%;
}

.progress-circle path {
  stroke: #000;
  stroke-width: 10;
  fill: none;
}

const progressCircle = document.querySelector('.progress-circle');
const path = progressCircle.querySelector('path');
let progress = 0;

const updateProgress = () => {
  path.setAttribute('stroke-dashoffset', 251.2 - (progress * 251.2 / 100));
};

setInterval(() => {
  progress += 1;
  if (progress > 100) {
    progress = 0;
  }
  updateProgress();
}, 100);