TOP > Technical Column > Bootstrap5 を利用した画面全体のローディング表示

Bootstrap5 を利用した画面全体のローディング表示

約 8 分
Bootstrap5 を利用した画面全体のローディング表示

ローディング表示

いろいろなシステムにおいて、ユーザがアクションを起こしたのに画面が何も変わらなかったら、ユーザは不安になってしまいます。 そのため、Webシステムなどであればページの読み込みやサーバ問い合わせ中にローディングを表示したりします。 よく利用する機能ですので、フレームワークなどで用意してくれてたらなと思うのですが、システムや開発者によって実装方法が異なるためか、決まった形式のものが存在しません。 今回は私がよく利用するローディング表示を Bootstrap5 を利用して示したいと思います。 Bootstrap5 では Bootstrap4 にはなかった細かな設定が含まれましたので、それを利用することで必要な CSS を最小限にすることができます。（2021年9月現在 Bootstrap5 はまだベータ版であるため、正式版がリリースされたときに実装が異なる可能性があります。）

ローディング表示実装

CSS

必要な追加のスタイルはこれだけです。ローディング表示背景の色は黒を 50% 透過させていたます。また最前面に表示する必要があるため、z-index に大きな値を設定しています。 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
    #loading {
        background: rgba(0, 0, 0, .5);
        z-index: 10000;
    }
</style>

HTML

次は HTML を見てみましょう。ローディング中を示すために、 Bootstrap の spinner を利用しています。ID: loading のクラスや、その子要素のクラスを見ると、多数の Bootstrap で設定されているクラスが利用されています。その多くは Bootstrap5 から用意されたものが多いです。 Bootstrap5 は便利ですね。 
<div id="loading" class="position-absolute top-0 start-0 w-100 h-100 d-none">
    <div class="text-center position-absolute top-50 start-50 w-100 translate-middle">
        <div class="spinner-border text-light" role="status">
            <span class="sr-only"></span>
        </div>
    </div>
</div>

JavaScript

それではローディングを表示・非表示させましょう。実装方法は人によって異なりますが、私は Bootstrap5 の d-none クラスを利用します。 d-none クラスが追加されると要素が非表示、削除されると要素が表示されるので、それを利用して show_loading メソッドと hide_loading メソッドを用意しました。 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script>
    $(function () {
        //ローディング表示
        show_loading();

        //5秒後にローディング非表示
        setTimeout(function () {
            hide_loading();
        }, 5000);
    })

    //ローディング表示
    function show_loading() {
        $('#loading').removeClass('d-none');
    }

    //ローディング非表示
    function hide_loading() {
        $('#loading').addClass('d-none');
    }

    function hello() {
        console.log('Hello');
    }
</script>

ソースコード全体

ソースコード全体を示します。今回はコンソールに「Hello」と表示するボタンも用意しています。 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Loading</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <style>
        #loading {
            background: rgba(0, 0, 0, .5);
            z-index: 10000;
        }
    </style>
</head>
<body>
<div id="loading" class="position-absolute top-0 start-0 w-100 h-100 d-none">
    <div class="text-center position-absolute top-50 start-50 w-100 translate-middle">
        <div class="spinner-border text-light" role="status">
            <span class="sr-only"></span>
        </div>
    </div>
</div>
<div>
    <button class="btn btn-primary" onclick="hello();">ハロー</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script>
    $(function () {
        //ローディング表示
        show_loading();

        //5秒後にローディング非表示
        setTimeout(function () {
            hide_loading();
        }, 5000);
    })

    //ローディング表示
    function show_loading() {
        $('#loading').removeClass('d-none');
    }

    //ローディング非表示
    function hide_loading() {
        $('#loading').addClass('d-none');
    }

    function hello() {
        console.log('Hello');
    }
</script>
</body>
</html>
このソースコードを実行すると、画面表示と共にローディングが表示されます。そして 5 秒後にそのローディングが消えます。ローディング表示中にハローボタンを押下しても何も起きませんが、ローディングが消えた後はボタン押下によりコンソールに「Hello」と表示され、ローディング表示によりその背後にあるコントロールが操作できないことがわかります。

まとめ

Webシステムには必要不可欠なローディング表示を紹介しました。ローディング表示はシステムや開発者によって異なりますので、もしお気に召して頂けたら本ソースコードを自分なりに改造してご利用ください。

関連記事

» エンジニア登録はこちら