【初心者の方向け】 Bootstrap4の使い方スピナー

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

コンテンツロード時に表示されるローディングスピナーもBootstrapで簡単に表示ができます。
実際に読み込み終了時の切り替えにはJavaScriptを使いますが、今回はBootstrapでのスピナー表示のみになります。

Bootstrap4のバージョン4.3をベースに書いています。

基本的なスピナーと色の指定

.spinner-borderで円のラインの一部が欠けて回転するアニメーションを表示できます。

一番左のスピナーは色指定無し、他はtext-カラー名で指定しています。

サンプルコード

<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>
<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>

グローイングスピナーと色指定

.spinner-growでグローイング(成長する)ローディングのアニメーションを表示できます。

上記と同様に一番左のスピナーは色指定無し、他はtext-カラー名で指定しています。

サンプルコード

<div class="spinner-grow" role="status"><span class="sr-only">Loading...</span></div>
<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>

サイズ

.spinner-border(またはgrow)-smで小さいサイズで表示できます。

またはclassやstyleで任意のサイズにすることもできます。

サンプルコード

<!--spinner-○○-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>
<!--styleを指定して任意のサイズを表示-->
<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>

ボタンにスピナーを使う

ボタンにローディングスピナーを使用します。

選択後の画面推移などの処理時などに利用できます。

サンプルコード

<!-- .spinner-border使用例 -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border" role="status" aria-hidden="true"></span> Loading...</button>
<!-- .spinner-grow使用例 -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow" role="status" aria-hidden="true"></span> Loading...</button>

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。