使用 HTML 和 CSS 创建一个圆形进度条

在本文中，我们将学习如何使用 HTML 和 CSS 创建一个圆形进度条。这是一个简单的项目，但可以帮助你学习 CSS 过渡和动画的基础知识。

前置条件

在开始本教程之前，你需要了解以下内容：

• 基本的 HTML 和 CSS
• 盒模型和 CSS 盒子模型
• CSS 选择器和基本语法
• CSS3 过渡和动画

创建一个 HTML 文件

我们将从创建一个 HTML 文件开始。这个文件里应该包含项目使用到的所有 HTML 元素。在这个教程里，我们将创建四个元素：

• 一个容器元素，用来包含整个进度条
• 一个圆形元素，用来表示进度的形态
• 一个标签元素，用来显示进度的百分比
• 一个输入元素，用来表示进度的百分比（我们将在后面的步骤中使用这个元素）

在 HTML 文件中，我们的代码将如下所示：

    <div class="progress">
      <div class="progress-circle"></div>
      <div class="progress-label">0%</div>
      <input type="range" class="progress-input" min="0" max="100" />
    </div>

添加样式

接下来，我们需要添加一些样式来展示进度条。

我们将使用 CSS3 的开关属性 transform 来实现进度（圆形）元素的旋转，并使用 transition 属性来定义该属性的过渡效果。

我们还将使用 border-radius 属性来定义圆形元素，box-shadow 属性来实现描边效果，以及 font-family 和 text-shadow 属性来定义标签元素的字体和字体阴影。

在我们的 CSS 文件中，代码如下所示：

    .progress {
      width: 200px;
      height: 200px;
      position: relative;
    }

    .progress-circle {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
      transform: rotate(-90deg);
      transition: transform 0.3s ease;
    }

    .progress-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: Arial, sans-serif;
      font-size: 32px;
      font-weight: bold;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
      color: #333;
    }

    .progress-input {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
    }

实现动态进度

最后，我们需要添加一些 JavaScript 代码，使输入元素的值可以映射到进度（圆形）元素上。

我们将监听输入元素的 “input” 事件，并将其值映射到旋转角度上。这是通过将旋转角度设置为输入元素值的百分比来实现的。我们还将更新标签元素的文本内容，以显示当前进度的百分比。

在我们的 JavaScript 文件中，代码如下所示：

    const progressCircle = document.querySelector(".progress-circle");
    const progressLabel = document.querySelector(".progress-label");
    const progressInput = document.querySelector(".progress-input");

    progressInput.addEventListener("input", () => {
      const percent = progressInput.value;
      const degrees = -90 + percent / 100 * 360;
      progressCircle.style.transform = `rotate(${degrees}deg)`;
      progressLabel.textContent = `${percent}%`;
    });

Markdown 代码片段

HTML 代码片段：

<div class="progress">
  <div class="progress-circle"></div>
  <div class="progress-label">0%</div>
  <input type="range" class="progress-input" min="0" max="100" />
</div>

CSS 代码片段：

.progress {
  width: 200px;
  height: 200px;
  position: relative;
}

.progress-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  transform: rotate(-90deg);
  transition: transform 0.3s ease;
}

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  color: #333;
}

.progress-input {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

JavaScript 代码片段：

const progressCircle = document.querySelector(".progress-circle");
const progressLabel = document.querySelector(".progress-label");
const progressInput = document.querySelector(".progress-input");

progressInput.addEventListener("input", () => {
  const percent = progressInput.value;
  const degrees = -90 + percent / 100 * 360;
  progressCircle.style.transform = `rotate(${degrees}deg)`;
  progressLabel.textContent = `${percent}%`;
});