W3.CSS 进度条

进度条可用于显示用户在进程中的进度：

20%

基本进度条

普通的 <div> 元素可用于进度条。

CSS width 属性可用于设置进度条的高度和宽度。

示例

亲自试一试 »

进度条宽度

使用 CSS 更改进度条的宽度宽度属性（从 0 到 100%）：

示例

亲自试一试 »

进度条颜色

使用w3-颜色更改进度条颜色的类：

示例

亲自试一试 »

进度条标签

在 a 内添加文本w3-容器元素向进度条添加标签。

使用w3-中心类将标签居中。如果省略，它将左对齐。

25%

50%

75%

示例

亲自试一试 »

进度条文字大小

使用w3-尺寸更改容器中文本大小的类：

50%

示例

亲自试一试 »

进度条填充

使用w3-填充向容器添加填充的类。

25%

示例

亲自试一试 »

圆形进度条

使用w3-轮向进度条添加圆角的类：

25%

示例

亲自试一试 »

动态进度条

使用 JavaScript 创建动态进度条：

示例

<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green" style="height:24px;width:1%"></div>
</div>

<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
</script>

亲自试一试 »

带标签的动态进度条

居中标签：

示例

20%

亲自试一试 »

左对齐标签：

示例

20%

亲自试一试 »

进度条外的标签：

示例

20%

亲自试一试 »

另一个例子（高级）：

示例

Added 0 of 10 photos

亲自试一试 »