ローディングアニメーションを実装する方法【HTML CSS JavaScript】

SHARE

ページの読み込みに時間がかかると、真っ白なページがずーっと表示されることになります。サイトを見ているユーザーからすると「これ、読み込まれてないんじゃね？」と思われてしまい、ページを閉じてしまう可能性が高まります。

しかし、ローディングアニメーションを実装し「ちゃんと私たちのサイトのページが読み込まれてますよー」と伝えてあげることで、サイト離脱率を下げることにつながります。ビュンビュン動いてると注意をひけますしね！

ローディングアニメーションの実装は難しそうに思いますが、仕組みとしてはとてもシンプルです。

というわけで今回はローディングアニメーションの実装方法をご紹介します。

ローディング画面の作成

最初にローディング画面、つまりページが読み込まれている最中に表示される画面を作成していきます。

今回は仕組みを理解するために「色のついた背景が消える」というめちゃくちゃシンプルなものから作成し、最後に中のアイテムを設置していきます。

HTML

表記はとてもシンプル。

[id = “loading”]が画面全体をおおう要素で、[class = “loadingItem”]が中でクルクルしたりするモノを配置する要素になります。

<div id="loading">
    <div class="loader"></div>
</div>

ローディングは画面全体を覆うように作るので、HTMLは上のほうに設置するのが運用の上でわかりやすいかと思います。

私は<body>タグのすぐ直下に入れたりします。

<div id="loading">
    <div class="loader"></div>
</div>

<!--↓コンテンツエリア↓-->
<main id=content>
   <!--↓コンテンツの中身エリア↓--> 
</main>

CSS

ローディング画面をいっぱいにするようにCSSを書いていきます。

#loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: deepskyblue;
    transition: all 1s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

display:flexで画面いっぱいにし、中の要素を中央配置にします。

widthとheightをそれぞれ100vw・100vh、backgroundに色を指定して画面全体を１色で塗りつぶします。

[id = loading]を1番上に配置するためにpositionプロパティとz-indexを指定しています。

このコードを記述してページを表示すると、下の画像のように全てが一色で塗りつぶされているはずです。

中のコンテンツはこの後ろに隠れた

中のアニメーションを作成

先ほど作ったブルーの四角の中にローディングアニメーションを作成していきます。

基本的にはcssのkeyframeでアニメーションを作っていきますが、今回はローディングアニメーションのCSSを配布しているサイトから拝借しました。

追記したコードは下記の通りです。

SCSS

#loading {
    // 画面いっぱいになる箇所
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: skyblue;
    background-color: deepskyblue;
    transition: all 1s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    // 中のローディングアニメ
    .loader,
    .loader:before,
    .loader:after {
        background: #ffffff;
        animation: loading 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
    }

    .loader {
        color: #ffffff;
        text-indent: -9999em;
        margin: 88px auto;
        position: relative;
        font-size: 11px;
        transform: translateZ(0);
        animation-delay: -0.16s;

        &::before,
        &::after {
            position: absolute;
            top: 0;
            content: '';
        }

        &::before {
            left: -1.5em;
            animation-delay: -0.32s;
        }

        &::after {
            left: 1.5em;
        }
    }



    @-webkit-keyframes loading {

        0%,
        80%,
        100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }

    @keyframes loading {

        0%,
        80%,
        100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }

}

ここまででページが読み込まれている時に表示される画面が完成です。

一度整理しますが、ここまでやったことはHTMLとCSSで読み込み中に表示される画面の作成です。

アニメーションを抜きにしたら、青い背景を置いただけです。やってることは単純♪

ローディング画面を非表示にする

読み込み中に表示される画像は表示できましたが、読み込みが完了したときに非表示にしたいので、非表示にするスタイルを当てた新しいクラスを用意します。

読み込み完了時にjavascriptで用意したクラスを追加してあげることで、非表示にすることができます。

SCSS

loadedというクラスを用意しました。opacityを０、visibilityをhiddenとすることで要素を隠します。

.loaded {
  opacity: 0;
  visibility: hidden;
}

これを先ほどのSCSSに追記すると下記のようになります。

#loading {
    /* 画面いっぱいになる箇所 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: deepskyblue;
    transition: all 1s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    &.loaded {
        opacity: 0;
        visibility: hidden;
    }

    /* 中のローディングアニメ */
    .loader,
    .loader:before,
    .loader:after {
        background: #ffffff;
        animation: loading 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
    }

    .loader {
        color: #ffffff;
        text-indent: -9999em;
        margin: 88px auto;
        position: relative;
        font-size: 11px;
        transform: translateZ(0);
        animation-delay: -0.16s;

        &::before,
        &::after {
            position: absolute;
            top: 0;
            content: '';
        }

        &::before {
            left: -1.5em;
            animation-delay: -0.32s;
        }

        &::after {
            left: 1.5em;
        }
    }



    @-webkit-keyframes loading {

        0%,
        80%,
        100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }

    @keyframes loading {

        0%,
        80%,
        100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }

}

JavaScriptでクラスの付与

「読み込みが終わったら#loadingにloadedというクラスをつけてね」という記述をします。

window.onload = function () {
    const spinner = document.getElementById('loading');
    spinner.classList.add('loaded');
}

JQueryでクラス付与する場合

上記と同じ意味のものをJQuryで書いたものです。

$(function () {
    $('#loading').addClass('loaded');
});

これで読み込みが終わったら表示が消えるはずです！ローディングアニメーションの完成です！

safariでは注意が必要

safariでは戻るボタンでページを表示するとキャッシュが表示されます。

つまりローディングの画面のまま動かないということがあります。

その場合は下記のスクリプトを入れることで、ページ遷移した時に強制的にページを読み込ませることができます。

window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

今回は追加したクラスの中を非表示にするための記述にしましたが、keyframeを使うと読み込み後に再生されるアニメーションを作成することもできます。

暇があったらそれも記事にしようかな。。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

CSSのみで実装！画面端から無限ループするスライドの作り方

次の記事

アイキャッチ画像を出力する方法【wordpress】