プログレスバーは、処理がどれくらい進んだかをユーザに知らせるために使用します：

基本的なプログレスバー

w3-progress-container クラスは、プログレスバーのコンテナを定義し、w3-progressbar は、実際のプログレスバー（「塗潰し」領域）を定義します。CSS の width プロパティを使用して、プログレスバーの幅を設定します：

例

Try it Yourself ❯

プログレスバーのサイズ

例

Try it Yourself ❯

プログレスバーの色

デフォルトでは、w3-progress-container の色は薄い灰色で、w3-progressbar は灰色です：

例

Try it Yourself ❯

角丸プログレスバー

プログレスバーの角に丸みを追加するには、w3-round クラスのいずれかを使用します：

例

Try it Yourself ❯

プログレスバーのラベル

プログレスバーにラベルを追加するには、"w3-progressbar" 内に新しい要素を追加します。

チップ: ラベルを常に中央に配置しておくには、w3-center クラスを使用します。省略した場合は左揃えになります。

例

Try it Yourself ❯

動的なプログレスバー

例

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

Try it Yourself ❯

ラベル付きの動的プログレスバー

例

Added 0 of 10 photos

Try it Yourself ❯

W3.CSS プログレスバー

プログレスバー

基本的なプログレスバー

例

プログレスバーのサイズ

例

プログレスバーの色

例

角丸プログレスバー

例

プログレスバーのラベル

例

動的なプログレスバー

例

ラベル付きの動的プログレスバー

例

例

例

例