ホームページ > 記事 > ウェブフロントエンド > Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。
Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。
- 青灯夜游転載
- 2021-12-10 19:18:184284ブラウズ
Bootstrap でローディング効果を実現するにはどうすればよいですか?以下の記事では、Bootstrap5の読み込みアイコン(Spinners)コンポーネントを使って、コンポーネントの読み込み状況を示すアイコンの見方を紹介していますので、ご参考になれば幸いです。
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>%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913466050885Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
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>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913466620244Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
3 グラデーション読み取りアイコン
境界線読み取りアイコンが気に入らない場合は、グラデーション読み取りアイコンに切り替えることができます。技術的には回転しませんが、何度もフェードします。 グラデーション アイコンはさまざまな色もサポートしています。
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913467239610Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
上記と同じように、この読み取りアイコンも 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>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913467758018Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
4 マージン
マージン ユーティリティを使用して、単純に m-5 のように間隔を増やします。
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913468163927Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
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>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913468664185Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
右揃え
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913468913696Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
##5.2 Float
右揃えのフローティング実装<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913469457450Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
5.3 テキスト一般クラス
テキスト一般クラスは中央揃えを実装します<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913469981221Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
<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>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913470394754Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
<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>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913470774160Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
<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>
%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82 "163913471279683Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。")
<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>
ブートストラップの基本チュートリアルを参照してください。 ！
以上がBootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。