プログレスバー
プログレスバーは、ユーザーに沿ってプロセスにどのくらい離れているかを示すために使用することができます。
基本的なプログレスバー
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>ラベルを使用した動的プログレスバー
中心のラベル：
左揃えラベル：
プログレスバーの外にラベルを付けます：