W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 进度条



进度条

通过这些简单、灵活的进度条,为当前工作流程或动作提供实时反馈。

20%


基本的进度条

w3-progress-container 类为进度条定义了一个容器,而 w3-progressbar 定义了实际的进度条(“填充”区域)。 使用 CSS width 属性设置进度条的宽度:

Example

<div class="w3-progress-container">
  <div class="w3-progressbar" style="width:10%"></div>
</div>

尝试一下 »


进度条尺寸

可以以百分比(0 - 100%)的形式设置滚动条的尺寸:

:


Example

<div class="w3-progress-container">
  <div class="w3-progressbar" style="width:50%"></div>
</div>

尝试一下 »


带颜色的进度条

默认情况下,w3-progress-container 的颜色为浅灰色,w3-progressbar 为灰色:

可以使用W3.CSS的颜色类来改变它们的颜色::



Example

<div class="w3-progress-container w3-light-blue">
  <div class="w3-progressbar w3-blue" style="width:75%"></div>
</div>

尝试一下 »


圆角进度条

w3-round 类用于创建带有圆角的进度条:



Example

<div class="w3-progress-container w3-round">
  <div class="w3-progressbar w3-round" style="width:25%"></div>
</div>

尝试一下 »



进度条标签

在“w3-progressbar”中添加一个新元素,以向进度条添加一个标签。

提示: 使用 w3-center 类始终保持标签居中。 如果省略,它将左对齐。

25%

50%

75%

Example

<div class="w3-progress-container">
  <div id="myBar" class="w3-progressbar w3-green" style="width:25%">
    <div class="w3-center w3-text-white">25%</div>
  </div>
</div>

尝试一下 »


动态进度条

使用 JavaScript 脚本可以创建动态的进度条:


Example

<div class="w3-progress-container">
  <div id="myBar" class="w3-progressbar w3-green" style="width:1%"></div>
</div>

<button class="w3-btn" 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>

尝试一下 »


带标签的动态进度条

中心标签:

Example

20%

尝试一下 »

左对齐标签:

Example

20%

尝试一下 »

进度条之外的标签:

Example

20%

尝试一下 »