如何使用 HTML 和 CSS 创建进度条？

在 WEB 开发中，我们经常需要使用进度条来展示一些操作的进程，这里将介绍如何使用 HTML 和 CSS 创建进度条。

1. HTML 结构

首先，我们需要在 HTML 中添加进度条的结构，使用 <progress> 标签。<progress> 标签包含一个 value 属性，用来表示当前进度，以及一个 max 属性，用来表示最大值。

<progress value="0" max="100"></progress>

我们也可以指定标签文本内容，将进度值直接显示在进度条内部，同时使用 title 属性指定悬停文本。

<progress value="0" max="100">0%</progress>

2. CSS 样式

接下来，我们需要使用 CSS 来美化进度条的样式。

基本样式

以下是一个简单的进度条样式：

progress {
  width: 200px;
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #0066cc;
  border-radius: 10px;
}

我们设置了进度条的宽度和高度，以及背景颜色和边框半径，然后使用 ::-webkit-progress-value 伪元素来设置进度条已完成部分的样式，包括背景颜色和边框半径。

动画样式

我们也可以添加动画效果，让进度条的完成过程更加流畅。以下是一个带动画的进度条样式：

progress {
  width: 200px;
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #0066cc;
  border-radius: 10px;
  transition: width 0.5s ease-in-out;
}

我们使用 CSS 过渡动画来实现进度条宽度的变化，以达到动画效果。

3. JavaScript 交互

最后，我们可以使用 JavaScript 来控制进度条的值。

const progress = document.querySelector('progress');

function updateProgress(value) {
  progress.value = value;
  progress.textContent = value + '%';
}

updateProgress(50); // 将进度条的值设为 50

我们使用 querySelector 方法来获取进度条元素，然后通过 value 属性来设置进度条的值，同时更新元素的文本内容来显示当前进度值。

以上就是使用 HTML 和 CSS 创建进度条的方法，可以根据自己的需求来调整样式和交互效果，用于展示各种操作的进程。