こんにちは、ちゃんけいです。
Webサイトのローディング画面は、ユーザーにページ読み込みが行われていることを伝えやすく、表示までのストレス軽減に役立つのでおすすめです。
今回はCSSアニメーションを利用した簡単なローディング画面を紹介したいと思います。
まずは完成イメージをご確認ください。こんなローディング画面をつくります。
See the Pen CSS Loading by Chankei (@Chankei) on CodePen.
目次
HTML、CSSの準備
はじめに、ローディング時に表示される全面黒背景のレイヤーをサイトの上に重ねたいと思います。
次のHTMLを見て下さい。
1 2 3 4 5 6 7 8 9 | <body> <div class="loading"> <div class="animation">Now Loading...</div> </div> <header></header> ・ ・ ・ </body> |
ローディング画面とわかるクラス名をつけたdivを置きます。今回はそのまま、loadingというクラス名です。
その中に、animationというクラス名のついたdivがあります。CSSアニメーションが行われるdivタグになります。
次にCSSを設定していきます。 まずはローディング画面の大枠を決めます。
今回は全面を黒背景にします。背景色は、好みのものに変更してください。
position: fixed;をつけることで、サイトの上に被さるような形にしています。
1 2 3 4 5 6 7 8 9 10 | /* ローディング画面の背景 */ .loading { position: fixed; width: 100vw; height: 100vh; top: 0px; left: 0px; background: #000; z-index: 9999; } |
そしてアニメーション部分はこちら。 keyframeアニメーションを使って、文字の透明度を変化させています。
真ん中に表示するためにpositionを使っています。上位ブラウザだけが対象であればflex-boxを使うとより簡単です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* アニメーション */ .animation { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; -webkit-animation: loadinganimation 1500ms ease-out forwards infinite; animation: loadinganimation 1500ms ease-out forwards infinite; } @keyframes loadinganimation { from,to { opacity: 0; } 50% { opacity: .5; } } |
黒背景と、CSSアニメーションで完成したのがこちらになります。
See the Pen CSS Loading by Chankei (@Chankei) on CodePen.
jQueryでWebサイトのロードが完了した時の処理を書く
このままでは、ローディング画面がずっと出たままになってしまいます。
なので、ページを読み込んだら.loadingがフェードアウトするようにjQueryを書きます。
1 2 3 4 5 6 7 8 9 10 | // 読み込んだらフェードアウト $(window).load(function () { // 消えるタイミングはお好みで $('.loading').delay(1500).fadeOut(300); }); // 10秒待っても読み込みが終わらない時は強制的にローディング画面をフェードアウト function stopload(){ $('.loading').delay(1000).fadeOut(700); } setTimeout('stopload()',10000); |
これでローディング画面が簡単に実装できました。
他にもfakeLoder.jsなどプラグインもありますのでオススメです。
ローディング画面のサンプル紹介
簡単に実装できたはいいのですが、アニメーションの部分は少し大変ですね。
なのでGitHubなどで公開されているものを参考にするのが良いです。
Loaders.css
こちらは、すこし変わったアニメーションがたくさんあります。
Single Element CSS Spinners
こちらは、ローディング画面とすぐわかるような見た目のものばかりなので使いやすいかと思います。
サムネイル部分の「View Source」をクリックすることですぐにCSSをコピペできるのでとても便利です。
他にもCodePenの検索で、「Loading」など探してみるのもオススメですし、技術系のサイトで多数のCSSアニメーションが紹介されているのでそちらもオススメです。
一度仕組みがわかってしまえばCSSアニメーションはとても簡単なので、ぜひコードを読み解いて自分の思った通りの動きをさせてみてください。
「ホームページ制作のことは良くわからない…。」シンス株式会社はそんな中小企業の強い味方です。
