【jQuery】ページ読み込み後にスライドが上がるローディング画面の作り方

こんにちは、Ryohei（@ityryohei）です！

本記事ではjQueryとCSSでスライドが上がるローディング画面の作り方をご紹介しています。

ローディング画面というのは、ページ読み込み中に表示される画面になります。実装されているサイトによって表示は異なりますが、くるくる回るアイコンが表示されたり、パーセンテージやプログレスバーで進捗状況を示すものが一般的かと思います。

今回実装したいもの

今回実装するローディング画面は、ページ読み込みが完了したタイミングで画面を覆っているスライドが上がるアニメーションです。具体的には下記のデモのような動きになります。（「Run Pen」を押すとデモをご確認いただけます。）

See the Pen
Slide Up Loader｜jQuery by ryohei (@intotheprogram)
on CodePen.

デモを再生すると、画面を覆っている要素が上がってコンテンツが表示されたかと思います。シンプルな動きですが、コンテンツを表示する前にワンクッション挟むだけで変化をつけることができるので、おすすめです。

では、解説していきます。

ローディング画面で表示する要素を作成する

HTMLでローディング画面で表示する要素を作成します。下記はデモで使用したサンプルコードです。「body」や「wrapper」の直下に設置します。「id」や「class」名はお好みのものに変更してご使用ください。

<div id="loader">
    <div class="loader-slide"></div>
</div>

ローディング画面のスタイルを定義する

続いてCSSでスタイルを定義します。（サンプルではSCSSを使用しています。）

ローディング画面で表示するスタイルを定義して、読み込みが完了した際にアニメーションを実行してスライドが上がるように指定します。アニメーションは「open」に設定し、読み込み完了時にこのclassをスライドに設定します。

@keyframes slideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    
    .loader-slide {
        width: 100%;
        height: 100%;
        background-color: #384878;
        
        &.open {
            animation-name: slideOut;
            animation-fill-mode: forwards;
            animation-duration: 1s;
            animation-delay: 1s;
        }
    }
}

以上でスタイルの作成は完了です。

読み込み完了後に実行するスクリプトを作成する

最後にスクリプトを作成します。前項で作成した「open」が読み込み完了時に付加されるようにします。

$(window).on('load', function(){
    $('.loader-slide').addClass('open');
});

以上ですべて完了です。これまでの内容を実装することでデモのようなローディング画面が作成できます！

最後に

いかがでしたでしょうか。

本記事ではスライドが上がるアニメーションを作成しましたが、自作する際にも応用が効く部分が多いので、ぜひオリジナルのローディング画面を作成していただければ幸いです。

以上、jQueryでページ読み込み後にスライドが上がるローディング画面の作り方のご紹介でした！