Bootstrap プログレスバーのコンポーネント_JavaScript スキルに関する詳細な知識

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

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

LESS: progress-bars.less

SASS: _progress-bars.scss

基本的な進行状況バー

実装原則:

外側のコンテナはクラス名 .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% です。

aria-valuemin="0" 属性関数: プログレスバーの最小値は 0% です。

aria-valuemax="100" 属性関数: プログレスバーの最大値は 100% です。

進行状況バー コンポーネントから .sr 専用クラスを含む タグを削除して、現在の進行状況を表示できます。

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

色付き進行状況バー

色付きのプログレスバーは警告プログレスバーと同じです。ユーザーのエクスペリエンスを向上させるために、さまざまな状態に応じて異なるプログレスバーの色が設定されています。主に次の 4 種類があります。

progress-bar-info: 情報の進行状況バーを示します (青色)

progress-bar-success: 成功した進行状況バーを示します (緑色)

progress-bar-warning: 警告の進行状況バーを示します (黄色)

progress-bar-danger: エラーの進行状況バーを示します (赤)

CSS ソースコード:

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

使用方法:

対応するクラス名を基本的な進行状況バーに追加するだけです

例:

<h1>彩色进度条</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>

効果は次のとおりです:

縞模様の進行状況バー

縞模様のプログレスバーは、画像を使用せずにCSS3の線形グラデーションを使用して実装されています。必要に応じて、縞模様のプログレスバーをプログレスバーのcontainer.progressにクラス名を追加するだけです。色付けされる進行状況のストライプ 進行状況は同じですが、色の効果もあり、対応するカラークラス名

を進行状況バーに追加するだけです

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

.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);
}

縞模様のプログレスバーのアプリケーションを見てみましょう:

<h1>条纹进度条</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>

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

プログレスバー .progress と .progress-striped の 2 つのクラスをベースに、クラス名 .active を追加することで、動的ストライププログレスバーを実現できます。

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

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

@-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;
}
}

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

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

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

例:

<h1>动态条纹进度条</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>

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<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>

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

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

关于Bootstrap进度条组件知识详解到此就介绍了，希望对大家有所帮助！