WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

最近ではhoverアクションやローディングアニメーションは画像を使用しなくてもCSSだけで動きがあるものを制作できるようになってきました。
今回は参考にしているエフェクト集「Css Effects」からローディングアニメーションの動きを使用したローディング画面の実装方法について解説していきます。

エフェクト集「Css Effects」

まずは動きの参考にしているエフェクト集「Css Effects」を見てみましょう。

一段目の左から2つ目か、二段目の左から2つ目がローディングアニメーションとして使えそうです！
今回は二段目の左から2つ目のアニメーションを使用したいと思います。

①使用したいアニメーションの所でクリックをします
②クリックをするとCSSがコピーをされるので使用したいスタイルシートにペーストしましょう
それではコピーしたCSSをJSと組み合わせて実装してみましょう。

ローディング画面

See the Pen
bGgLaJv by saki kurita (@saki_0415)
on CodePen.

※画面更新をすると再びローディングの動きを見ることができます。

まずはHTMLから解説していきます。

HTML

<div id="loader-bg">
  <div class="bouncingLoader"><div></div></div>
</div>
<p>ローディング画面完了後にテキスト表示</p>

#loader-bgはローディングの動きの.bouncingLoaderを囲う要素です。
その要素の下に表示させたい内容を記述していきます。今回の例でいうとpタグになります。

続いてCSSです。

CSS

/*画面全体をloader-bgで覆い隠すため背景色をひいてposition: fixed;で浮かせた状態にします*/
#loader-bg {
    background: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

/*ここからコピーしてきたCSSになりますが、loader-bgで囲っているので先頭に#loader-bgを付け足しています*/
#loader-bg .bouncingLoader {	
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}
.bouncingLoader > div, .bouncingLoader:before, .bouncingLoader:after {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: hsl(243, 80%, 62%);
    margin-bottom: -5px;
    border-radius: 50%;
    animation: bouncing-loader 0.6s infinite alternate;
}

.bouncingLoader > div, .bouncingLoader:before, .bouncingLoader:after {
    content: "";
}

.bouncingLoader > div {
    margin: 0 5px;
}

.bouncingLoader > div {
    animation-delay: 0.2s;
}

.bouncingLoader:after {
    animation-delay: 0.4s;
}

/*3つの円が上下に動くためのアニメーション*/
@keyframes bouncing-loader {
    to {
        opacity: 0.1;
        transform: translate3d(0, -16px, 0);
    }
}

最後にJSです。

JS

$(window).on('load',function(){
 $("#loader-bg").delay(3000).fadeOut('slow');
 //ローディング画面を3秒（3000ms）待機してからフェードアウト
});

$(window).on(‘load’,function(){ で、画像、動画などの関連データの全ての読み込みが完了したら実行します。
ローディングアニメーションを要素に含んでいる#loader-bgを3秒待機させてからフェードアウトで非表示をするようにしています。秒数は適宜変更してください。
これでCSSを使用したローディング画面の完成です！

まとめ

アニメーションする画像を作らなくても、CSSだけで表現できるのでとてもお手軽ですね。今回ご紹介した「Css Effects」以外にも色々と動きはアレンジできるので試してみてください。