Webページでは、システムの二等分、読み込みステータスなど、プログレスバー効果がよく見られます。進行状況バーコンポーネントは、CSS3の遷移およびアニメーション属性を使用して特殊効果を完了します。これらの特殊効果は、IE9およびIE9およびFirefoxのバージョン以下ではサポートされておらず、Opera 12はアニメーション属性をサポートしていません。
Progress Barは他の独立したコンポーネントに似ています。開発者は、ニーズに応じて対応するバージョンを選択できます。
Less：Progress-Bars.less
sass：_progress-bars.scss
基本的な進捗バー
実装の原則：
2つのコンテナが必要です。外側の容器はクラス名を使用します。プログレスとsubcontainerはクラス名を使用します。progress-bar; Progress Barコンテナの背景色、高さ、間隔などを設定するために.Progressが使用されます。 .Progress-Barは、進行状況の方向、背景色、および進行状況バーの過度の効果を設定します。以下はCSSソースコードです。
進行状況{高さ：20px;マージンボトム：20px;オーバーフロー：隠された;背景 - カラー：＃f5f5f5; border-radius：4px; -webkit-box-shadow：inset 0 1px 2px rgba（0、0、0、.1）; box-shadow：inset 0 {float：left; width：0; height：100％; font-size：12px; line-height：20px; color：#ffff; text-align：center; background-color：＃428bca; -webkit-box-shadow：inset 0 -1px 0 rgba（0、0、0、0、.15）; .15）; - webkit-transition：width .6s ease; transition：width .6s ease;}例：
<div> <div role = "progressbar" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100"> <span> 30％</span> </div> </div>
役割属性関数：検索エンジンに、このDIVの関数が進行状況バーであることを伝えます。
Aria-ValueNow =” 30”属性関数：現在の進行状況バーの進行状況は40％です。
Aria-valuemin =” 0”属性関数：進行状況バーの最小値は0％です。
Aria-valuemax =” 100”属性関数：進行状況バーの最大値は100％です。
Progress Barコンポーネントから.SRのみのクラスセットで<Span>タグを削除して、現在の進行状況を表示します。
<div> <div role = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> 40％</div> </div>
カラフルな進歩バー
色付きの進行状況バーは、警告の進行状況バーと同じです。ユーザーにより良いエクスペリエンスを提供するために、主に次の4つのタイプを含む、異なる状態に応じて異なる進行状況バーの色も構成されています。
Progress-Bar-INFO：情報プログレスバー、Blueを表します
Progress-Bar-Sucsess：Success Progress Bar、Greenを示します
進捗状況warning：警告の進行状況バー、黄色を示します
Progress-Bar-Danger：エラーの進行状況バー、赤を示します
CSSソースコード：
.progress-bar-success {background-color：＃5cb85c;}。。progress-bar-info {background-color：＃5bc0de;}。使い方：
対応するクラス名をBasic Progress Barに追加するだけです
例：
<h1>カラフルな進行状況バー</h1> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25％</div> <div> <div role = "progressbar" aria-valuemax = "40" ari-valuemax = "100" "100" Aria-valuemax = "0"> 40％</div> </div> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemax = "100"> 80％</div> </div> <div> <div aria-valuemin = "0"> 60％</div> </div>
効果は次のとおりです。
ストライプの進行状況バー
Striped Progress Barは、CSS3の線形勾配を使用します。写真は使用しません。 Striped Progress Barを使用するには、Class NameをProgress Barのコンテナに追加する必要があります。進捗。 Color Progressのように進行状況のストライプを作成し、色の効果がある場合は、対応するカラークラス名をProgress Barに追加するだけです。
以下は、.Progress-Striped Styleソースコードです。
.progress-striped .progress-bar {background-image：-webkit-linear-gradient（45deg、rgba（255、255、255、255、.15）25％、透明25％、透明50％、RGBA（255、255、255、.15）50％、RGBA（255、255、255、255、255、255、55、15）透明75％、透明）;バックグラウンドイメージ：線形勾配（45DEG、RGBA（255、255、255、.15）25％、透明25％、透明25％、透明50％、RGBA（255、255、255、.15）50％、RGBA（255、255、255、255、55％、.15）透明）;バックグラウンドサイズ：40px 40px;}ストリークの進行に対応する各状態も異なる色を持っています
.progress-striped .progress-bar-success {background-image：-webkit-linear-gradient（45deg、rgba（255、255、255、.15）25％、透明25％、透明50％、RGBA（255、255、255、.15）50％、255、255、255、255、255、255、255、255、255、255、255、255 75％、透明75％、透明）;バックグラウンドイメージ：線形勾配（45DEG、RGBA（255、255、255、.15）25％、透明25％、透明25％、.15）25％、透明25％、透明50％、RGBA（255、255、55、55、50％、RGBA（255、255、.15）50％） 50％、RGBA（255、255、255、.15）50％、RGBA（255、255、255、.15）75％、透明75％、透明性）; 50％、RGBA（255、255、255、.15）75％、透明75％、透明）;}。進行状況監視。 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255、255、255、255、255、255、255、255、255、255、255、255、255、255、255、255、255、255、25％、透明25％、透明50％、RGBA（255、255、255、.15）50％、RGBA（255、255、255、255、255、55％、.15）透明）;背景画像：線形勾配（45DEG、RGBA（255、255、.15）25％、透明50％、RGBA（255、255、255、.15）50％、RGBA（255、255、255、.15） 75％、透明）;} transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, .15) 25%,透明25％、透明50％、RGBA（255、255、255、.15）50％、RGBA（255、255、255、.15）75％、透明75％、透明）;}ストライプの進行状況バーの使用を見てみましょう。
<h1> striped progress bar </h1> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25％</div> <div> <div role = "progressbar" aria-valuemax = "40" ari-valuemax = "100" "100" Aria-valuemax = "0"> 40％</div> </div> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemax = "100"> 80％</div> </div> <div> <div aria-valuemin = "0"> 60％</div> </div>
ダイナミックストライプの進行状況バー
Dynamic Stripe Progress Barは、進行状況バーに基づいて実現できます。
実装の原則は、主にCSS3のアニメーションを通じて達成されます。まず、進行状態のバーストライプアニメーションが@KeyFramesを通じて作成されます。このアニメーションは、主に1つのことを行います。これは、背景画像の位置、つまりバックグラウンドポジションの価値を変更することです。縞模様の進行状況バーはCSS3の線形勾配を通じて作成され、線形勾配が背景に対応する背景画像を実装するため
これがCSSソースコードです：
@-webkit-keyframes progress-bar-stripes {from {background-position：40px 0;}から{background-position：0 0;}}@keyframes progress-bar-stripes {from {background-position：40px 0;}から{background-position：0;}}}}@KeyFramesはアニメーション効果を作成するだけです。 Progress Barを本当に動かしたい場合は、@KeyFramesによって作成されたアニメーション「Progress-Bar-Stripes」を特定の方法で呼び出し、アニメーションをトリガーしてイベントを実施する必要があります。 Bootstrapフレームワークでは、クラス名「アクティブ」を進行状況バーコンテナ「進行状況」に追加し、ドキュメントの読み込みを完了し、「進行中のバーストライプ」アニメーションに触れて有効にします
コールアニメーションの対応するスタイルコードは次のとおりです。
.progress.active .progress-bar {-webkit-animation：Progress-bar-stripes2s線形無限、アニメーション：Progress-bar-stripes2s線形無数;}例：
<h1> dynamic Stripe Progress Bar </h1> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" "aria-valuemax =" 100 "> 25％</div> </div> <div> <div> div role =" progressbar "aria-valuemax =" 40 "ari-valuemax" 100 "" " Aria-valuemax = "0"> 40％</div> </div> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemax = "100"> 80％</div> </div> <div> <div aria-valuemin = "0"> 60％</div> </div>
効果は次のとおりです（Webページの結果から直接来る写真であるため、ここで動的な効果を見ることができません）：
Cascade Progress Bar：
スタッキングの進行により、互換性のない進行状況バーをまとめて水平に配置できます。
例：
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
カラーの進行状況バーを積み重ねることに加えて、ストライプの進行状況バーを積み重ねたり、カラーの進行状況バーとストライプの進行状況を積み重ねたりすることもできます。対応する進行状況バーを「進行状況」コンテナに追加するだけです。また、積み重ねられた進行状況バーの合計は100％を超えることはできないことに注意してください。
例を見てみましょう：
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div> </div> <div> </div> </div> <div> </div> <div> </div> </div> </div>
これは、Bootstrap Progress Barコンポーネントの知識の詳細な説明です。私はそれが誰にでも役立つことを願っています！