进度条
进度条可以用来展示的是一个过程走多远用户：
基本的进度条
W3号正在进行容器类定义了一个容器进度条，而W3-进度定义实际进度栏（“装”区域）。 设置与CSS width属性进度条的宽度：
例
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>进度条大小
设定的百分比值从0到100％的进度条的宽度/尺寸：
例
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>进度条的颜色
默认情况下，W3-进度容器的颜色是浅灰色和W3-进度是灰色的：
改变它们的颜色与任何颜色W3.CSS类：
例
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>圆形进度条
使用任何W3轮类来圆角添加到您的进度条：
例
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>进度条标签
添加新元素“W3-进度”里面的标签添加到进度条。
提示：使用W3中心级始终保持居中的标签。 如果省略，它会被左对齐。
例
<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来创建一个动态的进度条：
例
<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>动态进度栏与标签
中心标签：
左对齐的标签：
标签的进度条之外：