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

Bootstrap4, 技術メモ

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

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

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

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

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

 

Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…

 

サンプルコード

 

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

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

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

Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…

サンプルコード

 

サイズ

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

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

 

Loading…
Loading…
Loading…
Loading…

 

サンプルコード

 

ボタンにスピナーを使う

 

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

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

 


 

サンプルコード

ドメイン取得は同じところで取得しておくと便利ですよ。 お名前.comは1円から購入できるドメインがあるので、いろいろと便利で経済的です。
当サイトはPWYW(Pay what you want)方式を採用しています。
この記事が参考になったり、サイト全体をご評価いただいた場合にお支払い頂ければ幸いです。
金額は自由に決められます。 PayPalで支払い
WP制作ならRU DESIGN

お気軽にお問い合わせください!

WordPressのカスタマイズや修正、オリジナルテーマの作成などリーズナブルな価格でご提供します。 お気軽にご相談下さい。 お問い合わせはこちら

関連記事

reCAPTHAの代替に!「hCAPTCHA」でスパム対策
reCAPTHAの代替に!「hCAPTCHA」でスパム対策
2022/01/26
不正ログインやスパム対策に使用している方が多いGoogleのreCAPTCHA。無料で手軽に導入できるセキュリティ対策として非常に便利でしたが、2020年にre...
ワードプレスの記事更新時に自動でBingに一括送信「Bing URL Submissions Plugin」
ワードプレスの記事更新時に自動でBingに一括送信「Bing URL Submissions Plugin」
2022/01/24
googleのサーチコンソールを利用されている方は多いかと思いますが、MicrosoftのBing ウェブマスターツールも利用されていますか? 詳しい使い方では...
WordPress Popular Postsのショートコードで連番で順位表示
WordPress Popular Postsのショートコードで連番で順位表示
2022/01/21
WordPress Popular Postsはサイトに人気記事を表示させる際に便利なプラグイン。ウィジェットなどを使用して表示することができますが、今回は『p...
8bitなレトロゲーム風CSSフレームワーク「NES.css」
8bitなレトロゲーム風CSSフレームワーク「NES.css」
2022/01/13
ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。ボタンや入力フォームといった基本的な要素から、SNSやキャラク...
ワードプレス5.9のリリースが延期に。新機能のフルサイト編集とは?
ワードプレス5.9のリリースが延期に。新機能のフルサイト編集とは?
2021/12/28
12月を予定していたWordPress 5.9のリリースが、2022年1月25日に延期になりました。 解決していないバグが残っているためらしい。 5.9はこんな...

お問い合わせ

制作依頼。業務委託・webや広告に関することなどお気軽にお問い合わせください。

    必須 お名前

    必須 メールアドレス

    必須 お問い合わせ内容

    必須 メッセージ本文

    このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。