请使用纯HTML制作一个进度条

<!DOCTYPE html>
<html>
<head>
<title>进度条</title>
<style>
#progress-container {
  width: 300px;
  height: 30px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden; /* 隐藏溢出的进度条 */
}

#progress-bar {
  height: 100%;
  background-color: #4CAF50; /* 进度条颜色 */
  width: 0%; /* 初始宽度为0 */
  border-radius: 5px;
  transition: width 0.5s ease-in-out; /* 添加过渡效果 */
}

#percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<h1>进度条</h1>

<div id="progress-container">
  <div id="progress-bar">
    <div id="percentage">0%</div>
  </div>
</div>

<button onclick="updateProgress(25)">25%</button>
<button onclick="updateProgress(50)">50%</button>
<button onclick="updateProgress(75)">75%</button>
<button onclick="updateProgress(100)">100%</button>


<script>
function updateProgress(percentage) {
  var progressBar = document.getElementById("progress-bar");
  var percentageDisplay = document.getElementById("percentage");

  progressBar.style.width = percentage + "%";
  percentageDisplay.textContent = percentage + "%";
}
</script>

</body>
</html>

代码解释:

HTML 结构:
- #progress-container: 进度条的容器，设置了宽度、高度、背景颜色和圆角。 overflow: hidden; 确保进度条不会超出容器。
- #progress-bar: 实际的进度条，初始宽度为 0，高度为 100%，背景颜色为绿色，也设置了圆角。 transition 属性提供了平滑的动画效果。
- #percentage: 显示百分比的文本，使用绝对定位和 transform 属性使其居中。
CSS 样式: 设置了进度条和容器的外观。
JavaScript 功能:
- updateProgress(percentage) 函数：接受一个百分比值作为参数，更新进度条的宽度和显示的百分比文本。