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>
帶標籤的動態進度條
居中標籤
左對齊標籤
進度條外的標籤
另一個示例（高階）
