検索

ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

青灯夜游
青灯夜游転載
2021-12-10 19:18:184329ブラウズ

Bootstrap でローディング効果を実現するにはどうすればよいですか?以下の記事では、Bootstrap5の読み込みアイコン(Spinners)コンポーネントを使って、コンポーネントの読み込み状況を示すアイコンの見方を紹介していますので、ご参考になれば幸いです。

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

1 シンプルな読み取りアイコン

ブートストラップを使用して、コンポーネントの読み込みステータスを示すアイコンを読み取ります。これらの読み取りアイコンは HTML、CSS を完全に使用し、JavaScript は使用しません。使用済み。それらの外観、配置、サイズは共通クラスを使用してカスタマイズできますが、表示を切り替えるにはカスタム JavaScript が必要です。 [関連する推奨事項: "ブートストラップ チュートリアル"]

以下は簡単な読み取りアイコンです

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>读取图标</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <div role="status">
            <span>Loading...</span>
        </div>

      </div>
  </body>
</html>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

2 色

境界線読み取りアイコンは、境界線の色として currentColor を使用します。つまり、テキストの色の一般カテゴリを使用してその色をカスタマイズできます。標準の既読アイコンでは、一般的なカテゴリの色を使用できます。 

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

3 グラデーション読み取りアイコン

境界線読み取りアイコンが気に入らない場合は、グラデーション読み取りアイコンに切り替えることができます。技術的には回転しませんが、何度もフェードします。 グラデーション アイコンはさまざまな色もサポートしています。 

<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

上記と同じように、この読み取りアイコンも currentColor を使用するため、テキスト カラー ユニバーサル カテゴリを使用して外観を簡単に変更できます。こちらは青と、それがサポートするカラーバリエーションです。 

<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

4 マージン

マージン ユーティリティを使用して、単純に m-5 のように間隔を増やします。 

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

5 配置

フレックスボックスの一般カテゴリ、フロートの一般カテゴリ、またはテキスト レイアウトを使用して、どのような場合でも読み取りアイコンを正確に配置します。必要な場所に配置します。それ。

5.1 Flex

以下は中央揃えです

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

右揃え

<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

##5.2 Float

右揃えのフローティング実装

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

5.3 テキスト一般クラス

テキスト一般クラスは中央揃えを実装します

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

6サイズ

spiner-border-sm と spinner-grow-sm を追加して、他のコンポーネントですぐに使用できるように、小さな読み取りアイコンを作成します。 

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

大きなアイコンを表示

<div class="spinner-border"   style="max-width:90%" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>

1Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

7 ボタン

[中を読む] ボタンを使用する アイコンは次のことを示します現在処理中であるか、操作が進行中であることを示します。ボタンのテキストを使用して、必要に応じて既読アイコンのテキストを変更することもできます。 

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

1Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

1Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。

ブートストラップの詳細については、

ブートストラップの基本チュートリアルを参照してください。 ！

以上がBootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css bootstrap html Float margin border flex
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：開発速度を向上させるための 15 個の無料の Bootstrap5 カスタム コンポーネント ジェネレーターを共有します。次の記事：開発速度を向上させるための 15 個の無料の Bootstrap5 カスタム コンポーネント ジェネレーターを共有します。

関連記事

続きを見る