自定义进度条

要自定义进度条，你可以使用 HTML、CSS 和 JavaScript 来实现。以下是一个简单的实现过程：

首先，在 HTML 文件中添加一个容器元素，用于存放进度条：

<div class="progress-bar">
  <div class="fill"></div>
</div>

接下来，在 CSS 文件中添加样式：

.progress-bar {
  width: 100%;
  height: 20px;
  border: 1px solid #ccc;
  position: relative;
}

.fill {
  height: 100%;
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  transition: width 0.5s ease-in-out;
}

这些 CSS 样式将创建一个具有灰色边框的进度条容器，以及一个蓝色的填充元素，用于表示进度。

最后，在 JavaScript 文件中更新填充元素的宽度，以反映进度：

function updateProgressBar(progress) {
  var fill = document.querySelector('.fill');
  fill.style.width = progress + '%';
}

// Example usage:
updateProgressBar(50); // set progress to 50%

这段 JavaScript 代码将使用 `querySelector` 方法获取填充元素，然后设置其宽度为指定进度的百分比。在实际使用中，你可以根据需要编写更复杂的逻辑来更新进度条。