ローダー

Webサイトではページの全てが描画されるまでの間にローダーを表示したり、Webシステムでは jQuery の Ajax などを利用し非同期でデータを取得する時にローダーを表示したりします。

私だけかもしれないですが、エンジニアがデザイナーから HTML, CSS をもらったタイミングでは、このローダーが用意されていることが少なく自前で用意することが多いように思います。とはいえ、全ての HTML にローダーの要素を追加するのは骨の折れる作業になります。

そこで今回は HTML には直接手を加えず、 画像も利用しない CSS, JavaScript のみで実装できるクルクル回るローダーを用意したので紹介します。

JavaScript

JavaScript のソースコードは、共通で利用するところに記述しましょう。追加するメソッドは show_loading() と hide_loading() の2つだけです。

function show_loading() {
    if ($('#loader').length === 0) {
        $('body').append('<div id="loader"></div>');
    }
}

function hide_loading() {
    $('#loader').fadeOut(400, 'swing', () => {
        $('#loader').remove();
    });
}

show_loading メソッドでは、IDが「loader」の要素がなければ body 要素にローダーを追加する処理を行っています。

一方、 hide_loading メソッドでは、 0.4 秒でフェードアウトし、フェードアウト後にローダー要素を削除する処理を行っています。

CSS

ローダーのスタイルを記述します。こちらも共通で利用するところに記述しましょう。IDが「loader」に関する内容になります。また回転するアニメーションも用意しています。

#loader {
    background: #000A;
    align-items: center;
    justify-content: center;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99999;
}

#loader::after {
    animation: loader_animation 0.5s linear infinite;
    border: 5px solid white;
    border-right: 5px solid #FFF3;
    border-radius: 100%;
    content: '';
    height: 100px;
    width: 100px;
}

@keyframes loader_animation {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

背景は黒の透過色、ローダーは白としました。またローダのサイズは縦・横ともに 100px です。要素は通常四角ですが、 border-radius: 50% とすることで円になります。また単色の円だと回っていることが判らないので、一部を白の透過色にしています。回る速度は、 0.5 秒で 1 周です。

ローダーの利用

それでは、このローダを利用してみましょう。画面遷移後、直ぐにローダーを表示するのであれば、次のようにすればいいですね。

$(function() {
    show_loading();
});

また ajax でデータ取得後にローダーを消すときは、次のように always などで処理してあげるといいでしょう。

function get_data() {
    $.ajax({
        url: 'https://hogehoge.com',
        type: 'GET',
    }).done(function (data, textStatus, jqXHR) {
        console.log(data);

    }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log(jqXHR);

    }).always(() => {
        hide_loading();
    })
}

まとめ

今回はプログラマー目線の実用的なWebシステム用ローダーを紹介しました。このローダーの最大の特徴は、 HTML ファイルを書き換えないことです。全ての HTML ファイルを修正するのは大変ですし、やっぱりデザイナーでローダーを用意することになっても JavaScript の処理だけを新しいローダーに合わせて修正すればいいので、後々も楽です。

私はデザインセンスがないので、こういうのが一つあれば使い回しできるので重宝しますね。皆さんも是非ご利用ください。