W3.CSS進度條

進度條

進度條可以用來展示的是一個過程走多遠用戶：

20％

基本的進度條

W3號正在進行容器類定義了一個容器進度條，而W3-進度定義實際進度欄（“裝”區域）。設置與CSS width屬性進度條的寬度：

例

試一試»

進度條大小

設定的百分比值從0到100％的進度條的寬度/尺寸：

例

試一試»

進度條的顏色

默認情況下，W3-進度容器的顏色是淺灰色和W3-進度是灰色的：

改變它們的顏色與任何顏色W3.CSS類：

例

試一試»

圓形進度條

使用任何W3輪類來圓角添加到您的進度條：

例

試一試»

進度條標籤

添加新元素“W3-進度”裡面的標籤添加到進度條。

提示：使用W3中心級始終保持居中的標籤。如果省略，它會被左對齊。

25％

50％

75％

例

試一試»

動態進度條

使用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>

試一試»

動態進度欄與標籤

中心標籤：

例

20%

試一試»

左對齊的標籤：

例

20%

試一試»

標籤的進度條之外：

例

20%

試一試»

W3.CSS

Examples

References

W3Data

W3.CSS進度條

進度條

基本的進度條

例

進度條大小

例

進度條的顏色

例

圓形進度條

例

進度條標籤

例

動態進度條

例

動態進度欄與標籤

例

例

例