GitHub で表示

スピナー

Bootstrapスピナーを使用して、コンポーネントまたはページの読み込み状態を示します。HTML、CSSのみで構築されており、JavaScriptは必要ありません。

概要

Bootstrapの「スピナー」は、プロジェクトの読み込み状態を表示するために使用できます。HTMLとCSSのみで構築されているため、作成にJavaScriptは必要ありません。ただし、表示を切り替えるには、カスタムJavaScriptが必要です。外観、配置、サイズは、優れたユーティリティクラスで簡単にカスタマイズできます。

アクセシビリティの観点から、各ローダーにはrole="status"とネストされた<span class="sr-only">読み込み中...</span>が含まれています。

このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存しています。アクセシビリティドキュメントの低モーションセクションを参照してください。

ボーダースピナー

軽量の読み込みインジケーターには、ボーダースピナーを使用します。

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

色

ボーダースピナーはborder-colorにcurrentColorを使用しているため、テキストカラーユーティリティを使用して色をカスタマイズできます。標準のスピナーには、テキストカラーユーティリティを使用できます。

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

なぜborder-colorユーティリティを使用しないのですか？ 各ボーダースピナーは、少なくとも一辺にtransparentボーダーを指定しているため、.border-{color}ユーティリティがそれを上書きします。

成長スピナー

ボーダースピナーが気に入らない場合は、成長スピナーに切り替えます。技術的には回転しませんが、繰り返し大きくなります！

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

このスピナーもcurrentColorを使用して構築されているため、テキストカラーユーティリティを使用して外観を簡単に変更できます。ここでは青色で、サポートされているバリアントと共に表示されています。

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

配置

Bootstrapのスピナーは、rem、currentColor、display: inline-flexを使用して構築されています。つまり、サイズ変更、色の変更、配置を簡単に行うことができます。

マージン

マージンユーティリティ（例：.m-5）を使用して、簡単に間隔を設定できます。

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

位置

フレックスボックスユーティリティ、フロートユーティリティ、またはテキスト配置ユーティリティを使用して、あらゆる状況でスピナーを必要な場所に正確に配置できます。

フレックス

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

読み込み中...

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

フロート

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

テキスト配置

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

サイズ

.spinner-border-smと.spinner-grow-smを追加して、他のコンポーネント内ですぐに使用できる小さなスピナーを作成します。

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

または、必要に応じてカスタムCSSまたはインラインスタイルを使用して寸法を変更します。

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

ボタン

アクションが現在処理中である、または実行中であることを示すために、ボタン内にスピナーを使用します。必要に応じて、スピナー要素のテキストを交換し、ボタンテキストを使用することもできます。

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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>