概要(About)
Bootstrapの「スピナー」を使用して、プロジェクトの読み込み状態が表示可能。HTMLとCSSだけで構築されているため、JavaScriptを作成する必要はない。ただし、可視性を切り替えるには任意のJavaScriptが必要。外観、配置、サイズは、Bootstrapの各ユーティリティクラスで簡単にカスタマイズ可能。
アクセシビリティのために、各ローダーには role="status"
と <span class="visually-hidden">Loading...</span>
を含めること。
prefers-reduced-motion
メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。
回転型スピナー(Border spinner)v5.0.0-alpha2設定変更
軽量なローディングインジケーターとして、回転型スピナーを使用。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
【設定】
div.spinner-border
>span.visually-hidden
> Loading...(ロード中を示す)
【アクセシビリティの設定】
.spinner-border
にはrole="status"
属性(支援技術にある種の更新された状態を伝える)を入れる- ロード中を示すテキストはユーザー補助用に
span.visually-hidden
で囲むこと
【変更履歴】
- 【v5.0.0-alpha2】
span.sr-only
⇒span.visually-hidden
カラー(Colors)
回転型スピナーは、border-color
に currentColor
を使用。つまり、テキストカラーユーティリティで色のカスタマイズが可能。下の見本は青色の回転型スピナー。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
標準のスピナーでは、テキストカラーユーティリティを使用すること。
色の種類
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
※色が見やすいように背景色と空白をつけています
.text-dark
.text-white
※色が見やすいように背景色と空白をつけています
.text-body
.text-muted
.text-black-50
.text-white-50
※色が見やすいように背景色と空白をつけています
【設定】
.spinner-border
に.text-{themecolor}
(定義済みの文字色)を追加- カスタムCSSで文字色を設定しても可
border-color
ユーティリティを使用しないのか? それぞれの回転型スピナーは、少なくとも一辺のボーダーを transparent
(透過)に指定しているので、.border-{themecolor}
ユーティリティではそれを上書きしてしまうから。
放射型スピナー(Growing spinner)v5.0.0-alpha2設定変更
回転型スピナーが気に入らない場合は、放射型スピナーに切り替え。技術的には回転しないが、繰り返し放射する。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
【設定】
div.spinner-grow
>span.visually-hidden
> Loading...(ロード中を示す)
【アクセシビリティの設定】
.spinner-grow
にはrole="status"
属性(支援技術にある種の更新された状態を伝える)を入れる- ロード中を示すテキストはユーザー補助用に
span.visually-hidden
で囲むこと
【変更履歴】
- 【v5.0.0-alpha2】
span.sr-only
⇒span.visually-hidden
このスピナーも currentColor
で構築されているので、テキストカラーユーティリティでその外観を簡単に変更。ここでは、サポートされているバリエーションとともに青色で表示。
色の種類
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
※色が見やすいように背景色と空白をつけています
.text-dark
.text-white
※色が見やすいように背景色と空白をつけています
.text-body
.text-muted
.text-black-50
.text-white-50
※色が見やすいように背景色と空白をつけています
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
【設定】
.spinner-grow
に.text-{themecolor}
(定義済みの文字色)を追加- カスタムCSSで文字色を設定しても可
ロードの実例 ※裏技
「Run Pen」を押すと実行、「Reload」を押すと約3秒後に再表示。
参考:超簡単 javascriptとcssで作る簡易ローディング画面(無口@work)
See the Pen News ticker on Bootstrap5 carousel (vertical slide) by cccabinet (@cccabinet) on CodePen.
※実際に使用する場合、HTML、JSともReloadの設定部分は不要。
配置(Alignment)
Bootstrapのスピナーは、rem
, currentColor
, display: inline-flex
で構築されている。これにより簡単にサイズや色の変更、素早い調整が可能。
空白(Margin)
空白ユーティリティ(.m-5
など)を使用すると、簡単にスペースを空けられる。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
【設定】
.spinner-{border|grow}
に空白ユーティリティを追加して空白を調整
位置(Placement)
Flexboxユーティリティ、floatユーティリティ、text-alignユーティリティを使用して、スピナーを必要な場所に正確に配置可能。
1. Flexユーティリティを使用(Flex)
見本(中央に配置)
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
見本(ローディングと合わせて左右に配置)
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
【設定】
.spinner-{border|grow}
をFlexユーティリティで囲んで位置を調整
2. 横の配置ユーティリティを使用(Floats)v5.0.0-beta1設定変更
見本(横の配置ユーティリティに追加)
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
見本(横の配置ユーティリティで囲む)
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="float-end">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
【設定】
.spinner-{border|grow}
に横の配置ユーティリティを追加するか、.spinner-{border|grow}
を横の配置ユーティリティで囲んで位置を調整
【変更履歴】
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
- 行頭揃え:
.float-left
⇒.float-start
- 行末揃え:
.float-right
⇒.float-end
- 行頭揃え:
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
3. 文字の配置ユーティリティを使用(Text align)v5.0.0-beta1設定変更
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
【設定】
.spinner-{border|grow}
を文字の行頭揃え/行末揃え/中央揃えユーティリティで囲んで位置を調整
【注意】
.spinner-{border|grow}
に文字の行頭揃え/行末揃え/中央揃えユーティリティを追加しても機能しない
【変更履歴】
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
- 文字の行頭揃え:
.text-left
⇒.text-start
- 文字の行末揃え:
.text-right
⇒.text-end
- 文字の行頭揃え:
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
サイズ(Size)
.spinner-border-sm
と .spinner-grow-sm
を追加すると、他のコンポーネント内で迅速に使用可能な小さめのスピナーが作成される。
1. .spinner-{border|grow}-sm
を使用
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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>
2. カスタムCSSを使用
または、カスタムCSSやインラインスタイルを使用して、必要に応じて大きさを変更。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border" style="width: 3rem; height: 3rem;" 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>
【設定】
- 小さめ:
.spinner-{border|grow}
に.spinner-{border|grow}-sm
を追加({border|grow}
の部分は統一すること) - カスタムCSS(
rem
単位)で大きさを設定しても可
ボタンに設定(Buttons)
ボタン内のスピナーを使用して、アクションが現在処理中か実行中であることを表示。また、スピナー要素からテキストを取り替えて、必要に応じてボタンテキストを使用することも可能。
1. 回転型スピナーの場合
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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>
<!-- 小さめのボタンの場合 -->
<button class="btn btn-primary btn-sm" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button class="btn btn-primary btn-lg" type="button" disabled>
<span class="spinner-border" role="status" aria-hidden="true"></span>
Loading...
</button>
2. 放射型スピナーの場合
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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>
<!-- 小さめのボタンの場合 -->
<button class="btn btn-primary btn-sm" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button class="btn btn-primary btn-lg" type="button" disabled>
<span class="spinner-grow" role="status" aria-hidden="true"></span>
Loading...
</button>
【設定】
- 標準のボタン:
.btn.btn-(outline-){themecolor}[disabled]
>span.spinner-{border|grow}.spinner-{border|grow}-sm[role="status"]
+ Loading... - 小さめのボタン:
.btn.btn-(outline-){themecolor}.btn-sm[disabled]
>span.spinner-*.spinner-{border|grow}-sm[role="status"]
+ Loading... - 大きめボタン:
.btn.btn-(outline-){themecolor}.btn-lg[disabled]
>span.spinner-*[role="status"]
+ Loading... - ボタンの文字をスピナーのみにする場合は、
span.spinner-{border|grow}(.spinner-{border|grow}-sm)[role="status"]
+ Loading... をspan.spinner-{border|grow}(.spinner-{border|grow}-sm)[role="status"]
>span.visually-hidden
> Loading... にする
【注意】
- ロード中のボタンの状態は無効化(
.btn[disabled]
)にする
インプットに設定(With inputs)v5.0.0-alpha1新設
<button>
や他の要素とは異なり、<input>
にはHTMLを含められない。そのため、Bootstrapの .form-control
インプットにスピナーを配置するには、絶対配置を <input>
の上に設定する必要がある。
.form-control-with-spinner
クラスを使用して、<input>
とスピナーを親の <div>
で囲む。クラスはインプットの padding-right
を調整しスピナーを配置。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<label for="exampleWithSpinner" class="form-label">スピナー付きのインプット</label>
<div class="form-control-with-spinner">
<input type="text" class="form-control" id="exampleWithSpinner" value="Spinning...">
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
これは放射型スピナーでも機能。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<label for="exampleWithSpinner2" class="form-label">スピナー付きのインプット</label>
<div class="form-control-with-spinner">
<input type="text" class="form-control" id="exampleWithSpinner2" value="Spinning...">
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
【設定】
- フォームのインプット・コントロールの後にスピナーの設定をし、コントロール全体を
div.form-control-with-spinner
で囲む