ウェブページにローディング画面を設置する方法

ホームページの表示待ちやウェブアプリの起動中画面で、クルクル回るアニメーションを見かけたことがありませんか？

よく使われるのは、GIFで作成されたアニメーション画像をページに埋め込む方法ですが、自然なアニメーションに見えるように各フレームの表示時間を調整するのは難しいものです。

そこで、画像の代わりにHTMLとCSSのアニメーション機能を組み合わせた方法が注目されています。

このようなローディングアイコンをCSSでアニメーションさせる方法を解説します。

まず、5本のバーを別々にアニメーションさせる必要があるので、HTMLで1本ずつタグを記述します。記述する場所は、ページのコンテンツを邪魔しないようにの直後やの直前などが良いでしょう。あくまでもエフェクトのためのタグなので、セマンティクスを考慮して、特に明確な意味を持たないdivタグを使うのがよいでしょう。CSSでアニメーションを適用できるように、それぞれclass名を付けておきます（rect1～rect5）。

<div id="loader">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

次にCSSを記述します。ワードプレスならテーマのstyle.cssや、テーマの設定画面にカスタムCSSの入力欄が用意されているならばそこに記述しましょう。

#loader {
    opacity: 1;
    position: fixed;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0;
    left: 0;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px
}

.spinner>div {
    background-color: #808080;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.spinner .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.spinner .rect4 {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

.spinner .rect5 {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

きちんとCSSがHTMLに関連付けてあれば、ページ全体に真っ白な背景が広がり、中央に5本のバーがアニメーションし続けます。

このままではページにアクセスした瞬間からずっとローディング画面のまま変わらないので、jQueryを使って以下の制御を追加します。もちろん、以下のコードよりも手前でjQueryのライブラリ本体をHTMLに読み込ませておく必要があります。

$(window).load(function() {
	$("#loader").fadeOut(400, function(){ $(this).remove(); });
});

【1行目】
windowのloadイベントが発生したとき（＝ページの内容がブラウザに全て読み込まれたタイミング）
【2行目】
ローディング画面全体を囲むタグを0.4秒間かけてふわっと消し（fadeOut）、完全に消えたらタグもHTMLから取り除きます（remove）。

CSSは長くて難しそうに見えますが、アニメーションの本質は簡単です。

5本のバーのうち2本目以降を少しずつ時間をずらして同じアニメーションを開始させればよいのです。.rect2から.rect5にそれぞれ、animation-delayプロパティでアニメーションが開始するまでの待ち時間をずらしています。アニメーションの内容は、@keyframesに定義します。@keyframesの中には、1回のアニメーションの開始を0%、終了を100%とみなす時系列に沿って、スタイルの値を記述します。ここでは、transform: scaleY(0.4)とtransform: scaleY(1.0)を使って、バーの高さをY軸方向に0.4倍に縮んだ状態と、1.0倍（元の状態）をアニメーションさせています。

CSSのローディングアニメーションのコードが利用できるサービス

あらかじめ作成済みのCSSをコピーしたり、色やアニメーションの動きをカスタマイズしたコードをコピーできるジェネレーターがたくさんあるので、興味のある方は「CSS　ローディング　サンプル」などでGoogle検索してみるとよいでしょう。

以下に、ローディングアニメーションが利用できるサイトを紹介します。

SpinKit | Simple CSS Spinners
Pure CSS Loading Spinners
Single Element CSS Spinners
Creating a Collection of CSS3 Animated Pre-loaders
CSS3 Loading Animation Loop