Bootstrap5でボタンにローディングスピナーを表示する方法を徹底解説 初心者向けガイド

1. Bootstrapのスピナーとは何かをやさしく解説

1. Bootstrapのスピナーとは何かをやさしく解説

Bootstrapとは、見た目を整えるためのデザイン用の仕組みです。ホームページやWebアプリ開発でよく使われています。特にBootstrap5は、ボタンやフォーム、ナビゲーションなどを簡単に作ることができる便利なツールです。

スピナーとは、読み込み中を表す回転する表示のことです。例えば、エレベーターを待っているときに上の階から下の階へ動く表示が出ます。それと同じように、処理が終わるまで待っていることをユーザーに伝える役割があります。

Web制作やフロントエンド開発では、ローディング表示を入れることで、ユーザー体験が大きく向上します。Bootstrapでは.spinner-borderというクラスを使うだけで簡単に実装できます。

2. ボタンの中にスピナーを表示する基本コード

2. ボタンの中にスピナーを表示する基本コード

まずは一番シンプルな例を見てみましょう。ボタンの中にスピナーを入れるだけで、ローディング中の表現ができます。HTMLは難しそうに見えますが、決まった形を覚えるだけで大丈夫です。

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status"></span>
    読み込み中
</button>

btnはボタンの見た目を整えるクラスです。btn-primaryは青色のボタンになります。disabledはクリックできない状態にするための指定です。

spinner-borderは回転する丸いスピナーを表示するためのクラスです。spinner-border-smと書くことで、小さいサイズになります。

3. スピナーと文字を横並びにきれいに配置する方法

3. スピナーと文字を横並びにきれいに配置する方法

スピナーと文字の間に少し余白を入れると、見た目がきれいになります。余白とは、文字と文字の間のすきまのことです。Bootstrapでは簡単に余白を調整できます。

<button class="btn btn-success" type="button" disabled>
    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
    データ送信中
</button>

me-2というのは、右側に少し余白をつける指定です。難しく考えなくても、数字が大きいほど余白が広くなると覚えておけば大丈夫です。

このようにすることで、Bootstrapボタンとローディングスピナーが自然に表示されます。

4. クリック後にスピナーを表示する仕組み

4. クリック後にスピナーを表示する仕組み

実際のWebアプリ開発では、ボタンを押したあとにローディング表示を出したいことが多いです。その場合は少しだけJavaScriptを使います。JavaScriptとは、動きをつけるための言語です。

<button id="sendBtn" class="btn btn-danger" type="button">
    送信する
</button>

<script>
document.getElementById("sendBtn").addEventListener("click", function() {
    this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>送信中';
    this.disabled = true;
});
</script>

addEventListenerは、クリックされたときの動きを決める命令です。innerHTMLはボタンの中身を書き換えるという意味です。

これでボタンを押すと、自動的にスピナー付きの表示に変わります。

5. ボタングループでローディングを表現する方法

5. ボタングループでローディングを表現する方法

ボタングループとは、複数のボタンを横に並べる機能です。検索ボタンや切り替えボタンなどでよく使われます。Bootstrapではbtn-groupというクラスを使います。

<div class="btn-group" role="group">
    <button class="btn btn-outline-primary">通常</button>
    <button class="btn btn-outline-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2"></span>
        処理中
    </button>
</div>

このようにボタングループの中の一つだけをローディング状態にすることもできます。管理画面やダッシュボード画面のUI設計でよく使われるテクニックです。

6. スピナーの色やサイズを変更する方法

6. スピナーの色やサイズを変更する方法

Bootstrap5では、色やサイズも簡単に変更できます。色はtextクラスを使います。例えばtext-lightは白色です。

<button class="btn btn-dark" type="button" disabled>
    <span class="spinner-border spinner-border-sm text-light me-2"></span>
    ローディング中
</button>

背景が黒いボタンの場合は、スピナーを白色にすると見やすくなります。このようにデザインとユーザー体験を意識することが、Web制作ではとても大切です。

7. ローディング表示を使うメリットと注意点

7. ローディング表示を使うメリットと注意点

ローディングスピナーをボタン内に表示することで、ユーザーは今処理が進んでいると理解できます。何も表示がないと、壊れているのではないかと不安になります。

特にフォーム送信やデータ保存、API通信など時間がかかる処理では、Bootstrapスピナーを活用することが重要です。

ただし、ずっと回り続ける状態にならないように注意が必要です。処理が終わったら、必ず元のボタン表示に戻す設計にしましょう。

Bootstrap5のボタンとスピナーを組み合わせることで、初心者でも簡単にローディング中の表現を実装できます。HTMLと少しのJavaScriptだけで、実践的なWebアプリ開発が可能になります。

まとめ

まとめ

今回はBootstrap5でボタンにローディングスピナーを表示する方法について、基礎から応用まで順番に解説しました。Bootstrap5はフロントエンド開発やWeb制作、Webアプリ開発において非常に人気のあるフレームワークです。その中でもspinner-borderを使ったローディングスピナーの実装は、ユーザー体験を向上させるために欠かせないテクニックです。 ボタンにローディング表示を組み込むことで、フォーム送信中やデータ保存中、非同期通信中であることをユーザーに明確に伝えることができます。特にAPI通信やデータベース登録処理など、時間がかかる処理ではローディング表示がないと不安を与えてしまいます。Bootstrapのbtnクラスやbtn-primary、btn-success、btn-dangerなどの装飾クラスと組み合わせることで、視認性の高いローディングボタンを簡単に作ることができます。 また、spinner-border-smを使えば小さいスピナーを表示でき、me-2を使えば余白を整えることができます。このようなユーティリティクラスを活用することが、Bootstrap5を使いこなす上で重要なポイントです。さらにJavaScriptのaddEventListenerやinnerHTMLを書き換える仕組みを理解することで、クリック後に動的にローディング状態へ切り替える実装も可能になります。 WebデザインやUI設計では、見た目の美しさだけでなく、操作に対する反応の分かりやすさが求められます。ローディングスピナーはその代表的な改善方法です。ボタンをdisabledにして二重送信を防止することも、実務では重要なポイントです。 Bootstrap5のボタンデザイン、スピナー表示、JavaScriptによる動的制御を組み合わせれば、初心者でも実践的なフロントエンド実装ができます。今回学んだ内容を活かして、問い合わせフォーム、ログイン画面、データ登録画面など、さまざまな場面でローディングボタンを活用してみてください。

サンプルプログラムの振り返り

<button id="loadingBtn" class="btn btn-primary" type="button">
    送信開始
</button>

<script>
document.getElementById("loadingBtn").addEventListener("click", function() {
    this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>処理中';
    this.disabled = true;

    setTimeout(() => {
        this.innerHTML = '完了';
        this.disabled = false;
    }, 3000);
});
</script>

上記のサンプルでは、クリック後にローディングスピナーを表示し、三秒後に完了表示へ戻す仕組みを実装しています。実際のWebアプリケーションでは、非同期通信の完了時に元へ戻すように設計します。Bootstrap5とJavaScriptを組み合わせることで、ユーザーに分かりやすい動きのあるボタンを作ることができます。