ページの読み込み中に数秒間白い画面が続くと、不安になることはありませんか？
ローディングアニメーションを実装することにより、ユーザー側に「ページをしっかり読み込んでいる」ことのアピールができます。
また、最近ではアニメーションを設置することも増えたので、ローディングの時点で視覚的に興味を与えることが可能になります。
複雑な処理無しに簡単に実装できる方法を紹介しますので、ぜひ設置してみてください！
目次
ローダーとは
ページが読み込まれている間に表示させるローディングアニメーションの事です。
一般的に企業ロゴやアニメーションなどを一定時間表示させます。
以前は画面がフリーズしているか読み込み中なのか判断するために、ローディングアニメーションを付けたみたいですが、最近ではユーザーの興味を引くようなアニメーションを設置することが多いです。
実装方法
それではローダーの実装方法を紹介します。
まず初めに基本的な「ページ読み込み時に表示させるローダー」を実装方法を紹介します。
ページ読み込み時に表示させるローダー
こちらが完成イメージです。
1 HTML
ローダーとして表示させるものをHTMLに記述していきましょう。
今回はテキストを中央に配置していますが、一般的には画像や企業ロゴ、GIFなどを置くことが多いです。
1 2 3 4 5 | <div class="loader"> <p class="txt">ローディング中</p> </div> |
2 CSS
次にCSSを記述します。
いくつかポイントがあるので、その点を抑えながら記述してください。
position: fixed;
画面に固定するため
height: 100vh;
画面幅に合わせるため
top: 0;とleft: 0;
position: fixed;はViewport（ブラウザのWindowの枠）からの絶対配置のため
z-indexの値を他の要素よりも高く
ローダーを他の要素と被らせないようにするため
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .loader { position: fixed; width: 100%; height: 100vh; background-color: #fff; z-index: 555; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .loader .txt { font-size: 45px; font-weight: bold; color: rgb(30, 50, 93); } |
3 js
最後はjsに記述します。
setTimeoutを使ってタイマー処理を書いていきます。
setTimeoutの使い方を簡単に説明します。
1 2 3 4 5 | setTimeout(function () { // 処理 }, ミリ秒数) |
基本的にこのような書き方をします。
秒数は 1秒 = 1000ミリ秒 となります。
そのため5秒でしたら5000、12秒でしたら12000と記述します。
setTimeoutの使い方がわかったところで、続きを進めましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | $(function () { function end_loader() { $('.loader').fadeOut(800); } $(window).on('load', function () { setTimeout(function () { end_loader(); }, 3000) }) }) |
「ページを開いて3秒後にフェードアウトしていく（フェード時間0.8秒）」という記述となっています。
CSSで元から表示されているローダーを一定秒数後に非表示にさせるためです。
記述は以上になります。
ページをリロードしてみてください。
狙い通りの動きになりましたか？
4 全コード
HTMLとCSSとjsのコードをまとめました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | // HTML <div class="loader"> <p class="txt">ローダー</p> </div> // CSS <style> .loader { position: fixed; width: 100%; height: 100vh; background-color: #fff; z-index: 555; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .loader .txt { font-size: 45px; font-weight: bold; color: rgb(30, 50, 93); } </style> // jQuery <script> $(function () { function end_loader() { $('.loader').fadeOut(800); } $(window).on('load', function () { setTimeout(function () { end_loader(); }, 3000) }) }) </script> |
要素をふわっと表示させるローダー
先ほど作成したローダーをもとにjsに追記をすれば、特定の要素をふわっと表示・非表示させることができます。
企業のロゴやテキストなどの表示をコントロールすることにより、残像感がなくなります。
そのため、ローダーとウェブページの切り替えをより滑らかに行うことができます。
今回はローダーの中心のテキストをふわっと表示させます。
完成イメージはこちらです。
1 HTML
今回も上下左右中央寄せにテキストを配置しています。
1 2 3 4 5 | <div class="loader"> <p class="txt">ふわっと出す</p> </div> |
2 CSS
テキストはjsで表示コントロールを行うため、あらかじめdisplay: none;で非表示にしておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .loader { position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 555; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .loader .txt { font-size: 45px; font-weight: bold; color: rgb(30, 50, 93); display: none; } |
3 js
setTimeoutを使って先ほどより細かく記述します。
まずは、表示・非表示をコントロールする関数を作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(function () { // ローダー終了 function end_loader() { $('.loader').fadeOut(800); } // テキスト表示 function show_txt() { $('.loader .txt-content .txt').fadeIn(400); } // テキスト非表示 function hide_txt() { $('.loader .txt-content .txt').fadeOut(400); } }) |
次にsetTimeoutを使ってタイマー処理を書いていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | $(function () { // ローダー終了 function end_loader() { $('.loader').fadeOut(800); } // テキスト表示 function show_txt() { $('.loader .txt-content .txt').fadeIn(400); } // テキスト非表示 function hide_txt() { $('.loader .txt-content .txt').fadeOut(400); } // タイマー処理 $(window).on('load', function () { // 処理① setTimeout(function () { show_txt(); }, 1000) // 処理② setTimeout(function () { hide_txt(); }, 3500) // 処理③ setTimeout(function () { end_loader(); }, 4500) }) }) |
処理の流れはこのような感じです。
処理② ページを開いて3.5秒後にテキスト非表示（フェード時間0.4秒）
処理③ ページを開いて4.5秒後にローダー非表示（フェード時間0.4秒）
タイマー処理を上手く使うと、全体的に滑らかな印象になります。
4 全コード
HTMLとCSSとjsのコードをまとめました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | // HTML <div class="loader"> <p class="txt">ふわっと出す</p> </div> // CSS <style> .loader { position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 555; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .loader .txt { font-size: 45px; font-weight: bold; color: rgb(30, 50, 93); display: none; } </style> // jQuery <script> $(function () { // ローダー終了 function end_loader() { $('.loader').fadeOut(800); } // テキスト表示 function show_txt() { $('.loader .txt').fadeIn(400); } // テキスト非表示 function hide_txt() { $('.loader .txt').fadeOut(400); } // タイマー処理 $(window).on('load', function () { // 処理① setTimeout(function () { show_txt(); }, 1000) // 処理② setTimeout(function () { hide_txt(); }, 3500) // 処理③ setTimeout(function () { end_loader(); }, 4500) }) }) </script> |
複数の要素をふわっと表示させるローダー
「要素をふわっと表示させるローダー」の応用編です！
企業のロゴなど画像を複数載せたい場合や、GIFと画像両方とも載せたい場合など複数の要素の表示をコントロールします。
今回はローディングのアニメーションとテキストを順番に表示させます。
完成イメージはこちらです。
アニメーションを使ってみると、よりローディング感がでますね。
ローディングのアニメーションは下記サイトからソースを持ってきました。
見ているだけで楽しいアニメーションが用意されているので、ぜひチェックしてみてください…！
1 HTML
アニメーション用の要素とテキストを設置しています。
1 2 3 4 5 6 7 8 9 10 | <div class="loader"> <div class="looping-rhombuses-spinner"> <div class="rhombus"></div> <div class="rhombus"></div> <div class="rhombus"></div> </div> <p class="txt">こんにちは！</p> </div> |
2 CSS
アニメーションのCSSはこちらでご確認ください。
アニメーション以外のCSSはこのような感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .loader { position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 555; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .loader .txt { font-size: 45px; font-weight: bold; color: rgb(30, 50, 93); display: none; } .loader .looping-rhombuses-spinner{ display: none; } |
3 js
やることは先ほど同様、setTimeoutを使って先ほどより細かく記述します。
まず表示・非表示をコントロールする関数を作成し、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(function(){ // ローダー終了 function end_loader() { $('#loader03').fadeOut(800); } // ローディング表示 function show_load() { $('#loader03 .looping-rhombuses-spinner').fadeIn(400); } // ローディング非表示 function hide_load() { $('#loader03 .looping-rhombuses-spinner').fadeOut(400); } // テキスト表示 function show_txt() { $('#loader03 .txt').fadeIn(400); } }) |
setTimeoutを使ってタイマー処理を書いていきます！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | $(function(){ // ローダー終了 function end_loader() { $('#loader03').fadeOut(800); } // ローディング表示 function show_load() { $('#loader03 .looping-rhombuses-spinner').fadeIn(400); } // ローディング非表示 function hide_load() { $('#loader03 .looping-rhombuses-spinner').fadeOut(400); } // テキスト表示 function show_txt() { $('#loader03 .txt').fadeIn(400); } // タイマー処理 $(window).on('load', function () { // 処理① setTimeout(function () { show_load(); }, 800) // 処理② setTimeout(function () { hide_load(); }, 3500) // 処理③ setTimeout(function () { show_txt(); }, 4000) // 処理④ setTimeout(function () { end_loader(); }, 5000) }) }) |
処理② ページを開いて3.5秒後にアニメーション非表示（フェード時間0.4秒）
処理③ ページを開いて4秒後にテキスト表示（フェード時間0.4秒）
処理④ ページを開いて5秒後にローダー非表示（フェード時間0.8秒）
4 全ソース
全ソースをまとめました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | // HTML <div class="loader"> <div class="looping-rhombuses-spinner"> <div class="rhombus"></div> <div class="rhombus"></div> <div class="rhombus"></div> </div> <p class="txt">こんにちは！</p> </div> // CSS <style> .loader { position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 555; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .loader .txt { font-size: 45px; font-weight: bold; color: rgb(30, 50, 93); display: none; } .loader .looping-rhombuses-spinner{ display: none; } </style> // jQuery <script> $(function(){ // ローダー終了 function end_loader() { $('#loader03').fadeOut(800); } // ローディング表示 function show_load() { $('#loader03 .looping-rhombuses-spinner').fadeIn(400); } // ローディング非表示 function hide_load() { $('#loader03 .looping-rhombuses-spinner').fadeOut(400); } // テキスト表示 function show_txt() { $('#loader03 .txt').fadeIn(400); } // タイマー処理 $(window).on('load', function () { // 処理① setTimeout(function () { show_load(); }, 800) // 処理② setTimeout(function () { hide_load(); }, 3500) // 処理③ setTimeout(function () { show_txt(); }, 4000) // 処理④ setTimeout(function () { end_loader(); }, 5000) }) }) </script> |
処理は若干長くなってしまいますが、複数の要素を表示させたいときでもとくに複雑な処理無しで実装できます。
初回読み込み時にだけローダーを実行
今回はsessionStorageを使用し、ページアクセスを判定します。
sessionStorageとは、ブラウザを開いてる間のみブラウザにデータを保存できる仕組みです。
sessionStorage内の値の保存や取得は簡単にできるので、早速みていきましょう！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(function(){ var flg = null; var check_access = function () { // ★sessionStorageの値を判定 if (sessionStorage.getItem('access_flg')) { // 2回目以降 flg = 1; } else { // 1回目 sessionStorage.setItem('access_flg', true); flg = 0 } return flg; } var $i = check_access(); if($i == 0){ // 1回目アクセスの処理 }else{ // 2回目アクセスの処理 } }) |
上から説明します。
1 2 3 4 | var flg = null; var check_access = function () { |
こちらは関数の定義と関数内で使用する変数を定義しています。
1 2 3 4 5 6 7 8 9 10 11 | if (sessionStorage.getItem('access_flg')) { // 2回目以降 flg = 1; } else { // 1回目 sessionStorage.setItem('access_flg', true); flg = 0 } return flg; |
sessionStorageは以下のように操作しています。
sessionStorage.getItem(‘key’)
・ sessionStorage の値の保存
sessionStorage.setItem(‘key’, ‘value’)
ですので今回の処理を言葉で表すと
『初回アクセスした際に、sessionStorage の key「’access_flg’」にvalue「true」を格納し、
2回目アクセス以降 key「’access_flg’」に値が入っていれば変数「flg」の値を変更させる』
となります。
実際の処理前の判定はこのようにできます。
1 2 3 4 5 6 7 8 | var $i = check_access(); if($i == 0){ // 1回目アクセスの処理 }else{ // 2回目アクセスの処理 } |
ローダーの場合、2回目アクセス時は「remove()」などを使用しローダーの要素自体を消しておきましょう。
sessionStorageについてこちらの記事で詳しく解説されているので、気になった方はぜひ見てみてください！
【初心者でも簡単】sessionStorageでブラウザにデータを保存してみよう【JavaScript】
まとめ
いかがでしたでしょうか？
ローダーの実装は少し難しそうと思われる方もいるかと思いますが、意外とシンプルな処理で実装できます。
ただローダーの表示時間が長すぎるとアクセスが離脱してしまう可能性があります。
とくにスマートフォンからの場合、ページの読み込みが3秒以上かかると離脱率が大幅に上がるそうです。
ですので、実装する際にはほどほどの長さに設定しましょう。
以上、最後までお読みいただきありがとうございました！！
