スピナー(Spinners) v5.0.0設定変更
コンポーネントまたはページのロード状態を示すBootstrapのスピナーは、HTML、CSS、JavaScriptなしで完全に構築されている。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
概要(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
を使用。つまり、テキストカラーユーティリティで色のカスタマイズができる。デフォルトのスピナーでは、テキストカラーユーティリティをご使用下さい。
色の種類
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
※色が見やすいように背景色と空白をつけています
.text-dark
.text-black
v5.1.0追加
.text-white
※色が見やすいように背景色と空白をつけています
.text-body
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
【設定】
.spinner-border
に.text-{color}
(文字色ユーティリティクラス)を追加- カスタム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
このスピナーも background-color
が currentcolor
で構築されているので、テキストカラーユーティリティでその外観を簡単に変更。ここでは、サポートされているバリエーションとともに青色で表示。
色の種類
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
※色が見やすいように背景色と空白をつけています
.text-dark
.text-black
v5.1.0追加
.text-white
※色が見やすいように背景色と空白をつけています
.text-body
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
【設定】
.spinner-grow
に.text-{color}
(文字色ユーティリティクラス)を追加- カスタムCSSで文字色を設定しても可
ロードの実例 ※裏技、v5.2.0JSファイルをES6に変更
「Run Pen」を押すと実行、「Reload」を押すと約3秒後に再表示。
参考:超簡単 javascriptとcssで作る簡易ローディング画面(無口@work)
See the Pen Bootstrap5 Spinner Loading(ES6) 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)v5.3.1設定変更
ボタン内のスピナーを使用して、アクションが現在処理中か実行中であることを表示。また、スピナー要素からテキストを取り替えて、必要に応じてボタンテキストの使用もできる。
1. 回転型スピナーの場合
見本
Bootstrap5.3.1の設定例 緑背景がv5.3.1での変更箇所
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" disabled>
<span class="spinner-border" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
※Bootstrap5.3.0の設定例 赤背景がv5.3.1での変更箇所
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" disabled>
<span class="spinner-border" role="status" aria-hidden="true"></span>
Loading...
</button>
2. 放射型スピナーの場合
見本
Bootstrap5.3.1の設定例 緑背景がv5.3.1での変更箇所
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" disabled>
<span class="spinner-grow" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
※Bootstrap5.3.0の設定例 赤背景がv5.3.1での変更箇所
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" 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
+span[role="status"]
Loading... - 小さめのボタン:
.btn.btn-(outline-){themecolor}.btn-sm[disabled]
>span.spinner-*.spinner-{border|grow}-sm
+span[role="status"]
Loading... - 大きめボタン:
.btn.btn-(outline-){themecolor}.btn-lg[disabled]
>span.spinner-*
+span[role="status"]
Loading... - ボタンの文字をスピナーのみにする場合は、
span.spinner-{border|grow}(.spinner-{border|grow}-sm)
+span[role="status"]
Loading... をspan.spinner-{border|grow}(.spinner-{border|grow}-sm)
>span.visually-hidden
>span[role="status"]
Loading... にする
【注意】
- ロード中のボタンの状態は無効化(
.btn[disabled]
)にする
【変更履歴】
- 【v5.3.1】
role="status"
の位置:span.spinner-{border|grow}[role="status"]
⇒span[role="status"]
Loading...
CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更
CSS変数(Variables)v5.2.0新設
Bootstrapの進化するCSS変数アプローチの一環として、スピナーは、リアルタイムのカスタマイズを強化するために、.spinner-border
と .spinner-grow
でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。
回転型スピナー変数:
デフォルトの設定
scss/_spinners.scss 内 spinner-border-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;
放射型スピナー変数:
デフォルトの設定
scss/_spinners.scss 内 spinner-grow-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;
両方のスピナーで、小さめのスピナー修飾子クラスを使用して、必要に応じてこれらのCSS変数の値を更新。例えば、.spinner-border-sm
クラスは次のことを行う:
デフォルトの設定
scss/_spinners.scss 内 spinner-border-sm-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
※.spinner-grow-sm
の場合は、上2行のみを使用。
Sass変数(Sass variables)v5.2.0変数から名称変更
デフォルトの設定
scss/_variables.scss 内 spinner-variables の設定$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;
キーフレーム(Keyframes)
スピナーのCSSアニメーションを作成するために使用される。scss/_spinners.scss
に組み込まれている。
デフォルトの設定
scss/_spinners.scss 内 spinner-border-keyframes の設定@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
scss/_spinners.scss 内 spinner-grow-keyframes の設定@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}