W3.CSSプログレスバー

❮ 前次 ❯

プログレスバーを使用して、ユーザーがプロセスにどの程度進んでいるかを示すことができます。

20％

基本的なプログレスバー

通常の<div>要素をプログレスバーに使用できます。

CSSのwidthプロパティを使用して、プログレスバーの高さと幅を設定できます。

例

プログレスバーの幅

CSSのwidthプロパティを使用してプログレスバーの幅を変更します（0から100％）。

例

プログレスバーの色

w3-カラークラスを使用して、プログレスバーの色を変更します。

例

プログレスバーラベル

w3-container要素内にテキストを追加して、プログレスバーにラベルを追加します。

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

25％

50％

75％

例

プログレスバーのテキストサイズ

w3-サイズクラスを使用して、コンテナ内のテキストサイズを変更します。

50％

例

プログレスバーのパディング

w3-paddingクラスを使用して、コンテナーにパディングを追加します。

25％

例

丸みを帯びたプログレスバー

w3-roundクラスを使用して、プログレスバーに丸みを帯びたコーナーを追加します。

25％

例

ダイナミックプログレスバー

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()">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%

別の例（高度）：

例

Added 0 of 10 photos