Bootstrap プログレスバーの詳細説明component_html/css_WEB-ITnose

Web ページでは、二等分システム、読み込みステータスなど、プログレス バーの効果は珍しいことではありません。プログレス バー コンポーネントは、CSS3 の遷移属性とアニメーション属性を使用して、いくつかの特殊効果を完成させます。 IE9 以下のバージョンでは利用できません。Firefox の古いバージョンではサポートされておらず、Opera 12 ではアニメーション属性がサポートされていません。

進行状況バーは、他の独立したコンポーネントと同じです。開発者は、独自のニーズに応じて、対応するバージョンを選択できます。

実装原則:

には 2 つのコンテナが必要です。外側のコンテナはクラス名 .progress を使用し、サブコンテナはクラス名 .progress-bar を使用します。プログレス バー コンテナの背景色を設定します。コンテナの高さと間隔など; .progress -bar は進行方向、背景色、および進行状況バーの遷移効果を設定します。以下は CSS ソース コードです:

.progress {  height: 20px;  margin-bottom: 20px;  overflow: hidden;  background-color: #f5f5f5;  border-radius: 4px;  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}

.progress-bar {  float: left;  width: 0;  height: 100%;  font-size: 12px;  line-height: 20px;  color: #fff;  text-align: center;  background-color: #428bca;  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);  -webkit-transition: width .6s ease;          transition: width .6s ease;}

例:

<div class="progress">         <div class="progress-bar" style="width:30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">             <span class="sr-only">30%</span>         </div>     </div>

role 属性関数: この div が進行状況バーとして機能することを検索エンジンに伝えます。

aria-valuenow=”30” 属性の効果: 現在の進行状況バーの進行状況は 40% です。 ” 属性の効果: プログレスバーの最小値は 0%;

aria-valuemax=”100 "属性の機能: プログレスバーの最大値は 100%;

タグセットを削除できますプログレスバーコンポーネントの .sr-only クラスを使用して、現在の進行状況を表示させます。ユーザーにより良いエクスペリエンスを提供するため、さまざまな状態に応じてさまざまなプログレスバーの色が設定されており、主に次の 4 つのタイプが含まれます:

progress -bar-info: 情報のプログレスバーを示します (青)

progress-bar-success:成功のプログレスバー、緑色

progress-bar-warning: 警告のプログレスバーを示します、黄色

progress-bar-danger: エラーを示します プログレスバー、赤色

css ソースコード:

<div class="progress">        <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" >40%</div>    </div>

使用方法:

対応するクラス名を基本的なプログレスバーに追加するだけです 例:

.progress-bar-success {  background-color: #5cb85c;}.progress-bar-info {  background-color: #5bc0de;}.progress-bar-warning {  background-color: #f0ad4e;}.progress-bar-danger {  background-color: #d9534f;}

効果は次のとおりです:

ストライププログレスバー

ストライププログレスバーは、次の線形グラデーションを使用して実装されます。画像を使用せずにCSS3を使用するには、プログレスバーのcontainer.progressにクラス名「progress-striped」を追加するだけです。プログレスストライプに色付きのプログレスのような色の効果を持たせるだけです。対応するカラークラス名をプログレスバーに追加します

以下は .progress-striped スタイルのソースコードです:

<h1 id="彩色进度条">彩色进度条</h1>     <div class="progress">         <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>     </div>     <div class="progress">         <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>     </div>     <div class="progress">         <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>     </div>     <div class="progress">         <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>      </div>

ストライプの進行状況に対応する各状態にも異なる色があります

.progress-striped .progress-bar {  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);  background-size: 40px 40px;}

見てみましょうストライププログレスバーの適用時:

.progress-striped .progress-bar-success {  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-info {  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-warning {  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-danger {  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 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, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}

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

プログレスバー .progress と .progress-striped の 2 つのクラスに基づいてクラスを追加し、動的なストライププログレスを実現するために .active という名前を付けます。バー。

実装原理は主に CSS3 アニメーションを通じて実現されます。まず、プログレス バー ストライプ アニメーションが @keyframes を通じて作成されます。このアニメーションは主に、背景画像の位置 (background-position の値) を変更することを行います。縞模様のプログレスバーは CSS3 の線形グラデーションによって作成され、linear-gradient は対応する背景に背景画像を実装するためです

以下は CSS ソース コードです:

<h1 id="条纹进度条">条纹进度条</h1>     <div class="progress progress-striped">         <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>     </div>     <div class="progress progress-striped">         <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>     </div>     <div class="progress progress-striped">         <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>     </div>     <div class="progress progress-striped">         <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>     </div>

@keyframes はアニメーション効果を作成するだけです。プログレスバーを実際に動かすには、@keyframes によって特定の方法で作成されたアニメーションを「progress-bar-stripes」と呼び、イベントを通じてアニメーションをトリガーして有効にする必要があります。 Bootstrap フレームワークで、クラス名「active」をプログレス バー コンテナ「progress」に追加し、ドキュメントが読み込まれるときに「progress-bar-stripes」アニメーションが有効になるようにします

呼び出しアニメーションに対応するスタイル コードは次のとおりです。次のように:

@-webkit-keyframes progress-bar-stripes {  from {    background-position: 40px 0;  }  to {    background-position: 0 0;  }}@keyframes progress-bar-stripes {  from {    background-position: 40px 0;  }  to {    background-position: 0 0;  }}

例:

.progress.active .progress-bar {  -webkit-animation: progress-bar-stripes 2s linear infinite;  animation: progress-bar-stripes 2s linear infinite;}

効果は次のとおりです (Web ページから直接取得した画像であるため、その動的な効果はここでは見ることができません):

進行状況バーのカスケード:

進行状況のカスケードでは、さまざまな状態の進行状況バーをまとめて水平に配置できます

例:

<h1 id="动态条纹进度条">动态条纹进度条</h1>     <div class="progress progress-striped active">         <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>     </div>     <div class="progress progress-striped active">         <div class="progress-bar progress-bar-info" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div>     </div>     <div class="progress progress-striped active">         <div class="progress-bar progress-bar-warning" style="width:80%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>     </div>     <div class="progress progress-striped active">         <div class="progress-bar progress-bar-danger" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div>     </div>

色付きの進行状況バーをカスケードすることに加えて、縞模様の進行状況バーや縞模様の進行状況をカスケードすることもできますバーと色付きプログレス バー 混合カスケードの場合は、対応するプログレス バーを「プログレス」コンテナに追加するだけです。また、カスケード プログレス バーの合計が 100% を超えることはできないことに注意してください。

例を見てみましょう:

<div class="progress">    <div class="progress-bar progress-bar-success" style="width:20%"></div>    <div class="progress-bar progress-bar-info" style="width:10%"></div>    <div class="progress-bar progress-bar-warning" style="width:30%"></div>    <div class="progress-bar progress-bar-danger" style="width:15%"></div></div>