W3.CSS 进度条
进度条可用于显示用户在某个过程中的进度。
20%
基本进度条
可以使用一个普通的 <div> 元素作为进度条。
可以使用 CSS width 属性来设置进度条的高度和宽度。
示例
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
进度条宽度
使用 CSS width 属性更改进度条的宽度（从 0 到 100%）
示例
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
进度条颜色
使用 w3-color 类来更改进度条的颜色
进度条标签
在 w3-container 元素中添加文本，可以为进度条添加标签。
使用 w3-center 类可以居中标签。如果省略，则为左对齐。
25%
50%
75%
示例
<div class="w3-light-grey">
<div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
进度条文字大小
使用 w3-size 类来更改容器中的文本大小
50%
50%
50%
示例
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
进度条内边距
使用 w3-padding 类为容器添加内边距。
25%
25%
25%
示例
<div class="w3-light-grey">
<div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
圆角进度条
使用 w3-round 类为进度条添加圆角
25%
25%
25%
示例
<div class="w3-light-grey w3-round">
<div class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
动态进度条
使用 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()">点击我</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>
带标签的动态进度条
居中标签
左对齐标签
进度条外的标签
另一个示例（高级）
