プログレスバーのブートストラップ
この章では、ブートストラッププログレスバーを説明します。 このチュートリアルでは、ブートストラップ、リダイレクト、または動作状態をロードプログレスバーを作成する方法について説明します。
効果を得るために、CSS3のトランジションやアニメーションを使用して、プログレスバーブートストラップ。 Internet ExplorerとFirefoxの9およびそれ以前の古いバージョンのこの機能をサポートしていません、オペラ12は、アニメーションをサポートしていません。
デフォルトのプログレスバー
基本的なプログレスバーを作成し、次の手順を実行します。
- <div>を持つクラス.progressを追加します。
- 次に、上記での<div>の内部には、<div>の空で、クラス .progressバーを追加します。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
それでは、次の例を見てみましょう：
例
<DIV クラス = "進歩">
<DIV クラス = "プログレスバー" 役割 = "プログレスバー" アリア-valuenowを = "60"
アリア-valueminの = "0" アリア-valuemax = "100" スタイル= "幅：40％; ">
<スパン クラス= "SR-のみ"> 40％ 完了 </ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
代替プログレスバー
次のように異なるスタイルのプログレスバーを作成するには：
- <div>を持つクラス.progressを追加します。
- 次に、上記での<div>の内部には、<div>要素を持つクラス .progressバーとプログレス・バー- *空のクラスを追加します。 *は、成功、情報、警告、危険であることができる場所。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
それでは、次の例を見てみましょう：
例
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：90％; ">
<スパン クラス= "SR-のみ"> 90％ 完了（成功した）</ span>の
</ DIV>
</ DIV>
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー情報」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：30％; ">
<スパン クラス= "SR-のみ"> 30％ 完了（情報）</ span>の
</ DIV>
</ DIV>
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バーの警告」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：20％; ">
<スパン クラス= "SR-のみ"> 20％ 完了（警告）</ span>の
</ DIV>
</ DIV>
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー危険」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：10％; ">
<スパン クラス= "SR-のみ"> 10％ 完了（危険）</ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
プログレスバーのストライプ
プログレスバーのストライプを作成し、次の手順を実行します。
- クラス .progressと.progressストライプの<div>に追加。
- 次に、上記での<div>の内部には、<div>要素を持つクラス .progressバーとプログレス・バー- *空のクラスを追加します。 *は、成功、情報、警告、危険であることができる場所。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
それでは、次の例を見てみましょう：
例
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：90％; ">
<スパン クラス= "SR-のみ"> 90％ 完了（成功した）</ span>の
</ DIV>
</ DIV>
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バー情報」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：30％; ">
<スパン クラス= "SR-のみ"> 30％ 完了（情報）</ span>の
</ DIV>
</ DIV>
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バーの警告」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：20％; ">
<スパン クラス= "SR-のみ"> 20％ 完了（警告）</ span>の
</ DIV>
</ DIV>
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バー危険」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：10％; ">
<スパン クラス= "SR-のみ"> 10％ 完了（危険）</ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
アニメーションプログレスバー
アニメーションプログレスバーを作成し、次の手順を実行します。
- クラス .progressと.progressストライプの<div>に追加。クラス .activeを添加しながら。
- 次に、上記での<div>の内部には、<div>の空で、クラス .progressバーを追加します。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
これは、縞模様が右から左に動きの感覚を持つようになります。
それでは、次の例を見てみましょう：
例
<DIV クラス= "進捗進捗ストライプアクティブ ">
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：40％; ">
<スパン クラス= "SR-のみ"> 40％ 完了 </ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
積み重ねられたプログレスバー
あなたも、複数のプログレスバーをスタックすることができます。 次の例に示すように、同じ.progressスタック上の複数のプログレスバーが、実現することができます。
例
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：40％; ">
<スパン クラス= "SR-のみ"> 40％ 完了 </ span>の
</ DIV>
<DIV クラス= "プログレスバーprogress-バー情報」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：30％; ">
<スパン クラス= "SR-のみ"> 30％ 完了（情報）</ span>の
</ DIV>
<DIV クラス= "プログレスバーprogress-バーの警告」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：20％; ">
<スパン クラス= "SR-のみ"> 20％ 完了（警告）</ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
