html百分比进度条

要创建一个百分比进度条，可以使用HTML和CSS。以下是一个简单的例子：

HTML代码：

<div class="progress">
  <div class="progress-bar" style="width: 50%;"></div>
</div>

CSS代码：

.progress {
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin-bottom: 20px;
}

.progress-bar {
  height: 100%;
  background-color: #007bff;
  border-radius: 5px;
  width: 0%;
  transition: width 0.3s ease-in-out;
}

在这个例子中，我们创建了一个带有 `.progress` CSS类的容器，它包含一个 `.progress-bar` CSS类的子元素。 `.progress` CSS类设置了进度条的高度、背景颜色和圆角。`.progress-bar` CSS类设置了进度条的高度、背景颜色、圆角和宽度。通过使用 `style` 属性设置 `.progress-bar` 元素的 `width` 属性，我们可以设置进度条的百分比。在这个例子中，进度条的宽度为50%。 这个进度条的宽度可以通过JavaScript来动态改变。