Bootstrap のさまざまなプログレスバーの例

この章では、Bootstrap のプログレスバーについて説明します。このチュートリアルでは、ブートストラップを使用して、ロード、リダイレクト、またはアクションの状態の進行状況バーを作成する方法を説明します。

ブートストラップのプログレスバーは、CSS3 トランジションとアニメーションを使用してこの効果を実現します。 Internet Explorer 9 以前および古いバージョンの Firefox はこの機能をサポートしておらず、Opera 12 はアニメーションをサポートしていません。

デフォルトのプログレスバー

基本的なプログレスバーを作成する手順は次のとおりです:

クラス .progress を使用して

を追加します。

次に、上記の

内に、クラス .progress-bar を持つ空の

を追加します。

幅をパーセンテージで表すスタイル属性を追加します。たとえば、style="60%" は進行状況バーが 60% の位置にあることを意味します。

次の例を見てみましょう:

例

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

基本スタイル

Bootstrap フレームワークは、プログレス バーの基本スタイル、幅 100% の背景色、およびそれを示すハイライト色を提供します。完成進捗。実際、このようなプログレスバーは非常に簡単に作成できます。通常、外側のコンテナは一定の幅を持ち、子要素は幅を 30 に設定します。 % (つまり、親コンテナの幅の比率) を設定し、その背景色を設定します

ブートストラップ フレームワークもこの方法で実装されており、外側のコンテナは「進行状況」スタイルを使用します。 、サブコンテナは「プログレスバー」スタイルを使用します。このうち、progress はプログレスバーのコンテナスタイルを設定するために使用され、progress-bar はプログレスバーの進行状況を制限するために使用されます

.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:40%"></div></div>

アクセシビリティを記述するより良い方法は次のとおりです

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

role 属性は検索エンジンにこの div を伝えます。関数は進行状況バーです。aria-valuenow="40" 属性は現在の進行状況バーに進行状況が 40% であることを示します。プログレスバーの最小値は 0%; aria-valuemax="100" 属性 プログレスバーの最大値は 100% であることを通知します

色付きのプログレスバー

Bootstrap フレームワークのプログレスバーこれは警告メッセージ ボックスと同じであり、ユーザーのエクスペリエンスを向上させるために、さまざまな状態に応じて設定されています。ここではカラープログレスバーと呼び、主に以下の4種類があります:

☑ Progress-bar-info: 情報のプログレスバーを示し、プログレスバーの色は青色です

☑ Progress-bar-success: を示します成功したプログレスバー、プログレス バーの色は緑色です

☑ Progress-bar-warning: 警告プログレスバーを示し、プログレスバーの色は黄色です

☑ Progress-bar-danger: エラープログレスバーを示します, プログレスバーの色は赤です

具体的な使い方はとても簡単で、基本的なプログレスバーに対応するクラス名を追加するだけです。 基本的なプログレスバーと比べて、プログレスバーの色が に変わりました。ある程度

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

<div class="progress"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

縞模様のプログレスバー

Bootstrapフレームワークでは、色付きのプログレスバーを提供することに加えて、画像を使用せずにCSS3の線形グラデーションを使用して実装される縞模様のプログレスバーも提供します。 Bootstrap フレームワークで縞模様のプログレス バーを使用するには、プログレス バーのストライプに色の効果を持たせたい場合は、クラス名「progress-striped」をプログレス バーのコンテナ「progress」に追加するだけです。色付きの進捗状況と同様に、クラス名「progress-striped」をプログレスバーコンテナに追加するだけです

[注] グラデーションを通じてプログレスバーのストライプ効果を作成できます。これは IE9 ブラウザではサポートされていません

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

<div class="progress progress-striped"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

ダイナミックストライプ

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

[注意] IE9ブラウザはサポートしていません

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

Bootstrapフレームワークでは、Add aを介してクラス名「active」をプログレスバーコンテナ「progress」に追加し、ドキュメントがロードされたときに「progress-bar-stripes」アニメーションを有効にします。これにより、右から左に移動するアニメーション効果が表示されます

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

<div class="progress progress-striped active"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

Cascading Progress Bar

上記のプログレスバーに加えて、Bootstrap フレームワークはカスケードプログレスバーも提供します。プログレスバーをカスケードすると、異なる状態のプログレスバーをまとめて配置し、水平に配置できます

複数のプログレスバーを同じ

に配置して、積み重ねて表示します .progress

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"><span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span>
  </div></div>

[注] カスケード プログレスバーの合計を調整することはできません100% を超えています

すごい

提示标签

　　在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

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

　　在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

<div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:1%">1%</div></div><div class="progress"><div class="progress-bar"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">1%</div></div>

 

以上がBootstrap のさまざまなプログレスバーの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

4週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

3週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

4週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

1 か月前 By DDD

KB5055523を修正する方法Windows 11にインストールできませんか？

2週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7720

15

Java チュートリアル

1641

14

CakePHP チュートリアル

1396

52

Laravel チュートリアル

1289

25

PHP チュートリアル

1233

29

もっと見る

Related knowledge

ブートストラップ検索バーを取得する方法 Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップの垂直センタリングを行う方法 Apr 07, 2025 pm 03:21 PM

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド：D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法：FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

See all articles