css 进度条

/* CSS 进度条示例 */

/* 定义进度条容器的样式 */
.progress-container {
  width: 100%;
  background-color: #ddd;
}

/* 定义进度条本身的样式 */
.progress-bar {
  width: 0;
  height: 30px;
  background-color: #4caf50;
  text-align: center;
  line-height: 30px; /* 垂直居中文本 */
  color: white;
}

/* 使用 JavaScript 动态更新进度条宽度 */

<!-- HTML 结构 -->
<div class="progress-container">
  <div class="progress-bar" id="myBar">0%</div>
</div>

<button onclick="move()">点击开始进度</button>

// JavaScript 代码用于动态更新进度条
function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}

解释说明：

1. CSS 部分：

   • .progress-container：定义了进度条容器的宽度和背景颜色。
   • .progress-bar：定义了进度条本身的宽度、高度、背景颜色、文本对齐方式以及行高（用于垂直居中显示文本）。

2. HTML 部分：

   • 包含了一个 div 元素作为进度条容器，另一个 div 元素作为进度条本身，并且有一个按钮用于触发进度条动画。

3. JavaScript 部分：

   • move() 函数通过 setInterval 每隔 10 毫秒更新一次进度条的宽度，直到达到 100%。同时，进度条内部的文本也会随之更新为当前的百分比值。

这样就可以创建一个简单的、动态更新的进度条效果。