1. Home
  2. 財団のプログレスバー

財団のプログレスバー2024 年の最新の入門チュートリアル。このコースでは プログレスバーの色,フィレットプログレスバー,プログレスバーサイズ,プログレスバーのラベル, について学習できます。

財団のプログレスバー

財団は、学位プログラムの処理を表示するプログレスバーとして使用することができます。

私たちは、でき<div>要素を使用.progress 、プログレスバーを作成するためにクラスを.meter子要素（<スパン>）のクラスを。 次のように私たちは、<span>の要素の進捗の割合を設定することができます。

例

<DIVクラス = "進歩">
<スパンクラス= "メーター"スタイル = "幅：70％"> </ span>の
</ DIV>

»をお試しください

プログレスバーの色

デフォルトでは、プログレスバーの色は青です。 クラスの別の色： .secondary 、 .success 、または.alert ：

例

<DIVクラス = "進歩">
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIVクラス=「二次進行" >
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIVクラス= "進捗成功」 >
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIV CLASS = "プログレス警告" >
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

»をお試しください

フィレットプログレスバー

.radiusと.roundプログレスバーの丸い角を追加するために使用するクラス：

例

<DIVクラス = "進歩">
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIVクラス= "進捗半径" >
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIVクラス= "進歩を丸く" >
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

»をお試しください

プログレスバーサイズ

あなたが使用することができます.small- numまたは.large- numプログレスバーの幅を変更するには、numが1（8.33パーセント）、12（デフォルト（100％））の間の数であります：

例

<DIVクラスは= "大進歩 1">
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIVクラスは= "大進歩 6">
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIVクラスは= "大進歩 9">
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<DIVクラスは= "大進歩 11">
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

<！ -デフォルト幅- >
<DIVクラスは= "大進歩 12">
<スパンクラス= "メーター"スタイル = "幅：50％"> </ span>の
</ DIV>

»をお試しください

プログレスバーのラベル

CSSは、プログレスバーをタグ付けするために使用することができます。 次の例では、我々はパーセンテージを表示するには、<span>の要素を追加しました：

例

<スタイル>
.percentage {
位置：絶対;
トップ：50％;
左：50％;
色：白;
変換：（-50％、-50％）を変換。
フォントサイズ：12ピクセル;
}
</スタイル>

<DIVクラス = "進歩">
<スパンクラス= "メーター"スタイル = "の位置：相対;幅：75パーセント">
<スパンクラス= "割合"> 75パーセント</ span>の
</スパン>
</ DIV>

<DIVクラス= "進捗成功」 >
<スパンクラス= "メーター"スタイル = "の位置：相対;幅：50％">
<スパンクラス= "割合"> 50％</ span>の
</スパン>
</ DIV>

<DIV CLASS = "プログレス警告" >
<スパンクラス= "メーター"スタイル = "の位置：相対;幅：25％">
<スパンクラス= "割合"> 25％</ span>の
</スパン>
</ DIV>

»をお試しください

ホットチュートリアル

お問い合わせ

財団のプログレスバー
10/30