コンポーネントまたはページの読み込み状態を、完全に HTML、CSS で構築され、JavaScript を使用せずに作成された Bootstrap スピナーで示します。
約
ブートストラップの「スピナー」を使用して、プロジェクトの読み込み状態を表示できます。これらは HTML と CSS のみで構築されているため、JavaScript を使用して作成する必要はありません。ただし、可視性を切り替えるにはカスタム JavaScript が必要です。それらの外観、配置、およびサイズは、当社の素晴らしいユーティリティ クラスを使用して簡単にカスタマイズできます。
アクセシビリティの目的で、ここの各ローダーにはrole="status"
ネストされた と が含まれてい<span class="sr-only">Loading...</span>
ます。
ボーダースピナー
軽量の読み込みインジケーターには、ボーダー スピナーを使用します。
色
ボーダー スピナーはcurrentColor
を使用します。つまり、テキスト カラー ユーティリティborder-color
で色をカスタマイズできます。標準のスピナーでは、テキスト カラー ユーティリティのいずれかを使用できます。
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
なぜborder-color
ユーティリティを使用しないのですか? 各ボーダー スピナーはtransparent
、少なくとも 1 つの辺のボーダーを指定するため、.border-{color}
ユーティリティはそれをオーバーライドします。
成長スピナー
ボーダー スピナーが気に入らない場合は、グロー スピナーに切り替えてください。技術的には回転しませんが、繰り返し成長します!
繰り返しになりますが、このスピナーは で構築されているため、テキスト カラー ユーティリティcurrentColor
を使用して外観を簡単に変更できます。ここでは、サポートされているバリアントとともに青色で表示されています。
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
読み込んでいます...
アライメント
Bootstraprem
のスピナーは 、currentColor
、および で構築されdisplay: inline-flex
ます。これは、サイズ変更、色変更、および迅速な位置合わせが簡単にできることを意味します。
マージン
簡単な間隔のようなマージンユーティリティを使用してください。.m-5
配置
flexboxユーティリティ、float ユーティリティ、またはテキスト配置ユーティリティを使用して、どのような状況でもスピナーを必要な場所に正確に配置します。
フレックス
浮き輪
テキスト揃え
サイズ
と を追加.spinner-border-sm
し.spinner-grow-sm
て、他のコンポーネント内ですばやく使用できる小さなスピナーを作成します。
または、カスタム CSS またはインライン スタイルを使用して、必要に応じて寸法を変更します。
ボタン内でスピナーを使用して、アクションが現在処理中または実行中であることを示します。必要に応じて、スピナー要素からテキストを交換し、ボタン テキストを利用することもできます。