jQueryでローディング画面を実装する方法を紹介！
WEBサイトやWEBアプリなどでよく見かけるローディング画面。ローディング画面はページ読み込み中であることをユーザーに分かりやすく伝えるための重要な要素の１つです。この記事ではjQueryでローディング画面を実装する方法をサンプルコード付きで紹介しています。
jQueryでローディング画面を実装したい
WEBサイトやWEBアプリなどで読み込み時にロード中であることを分かりやすく表示するためのローディング画面を見かけることがよくあるかと思います。
ローディング画面はユーザーにページ読込中であることを伝える大事な要素の１つです。
この記事ではそんな大事な要素であるローディング画面をjQueryで実装する方法を紹介していきます。
jQueryでローディング画面を実装する方法
それでは早速jQueryでローディング画面を実装する方法をサンプルコード付きで解説していきます。
ローディング画像でローディング画面を実装
HTML
index.html
<div id="loading">
<div id="animation">
<img src="imgs/loading.gif" alt="ローディング画像">
<p>Now Loading...</p>
</div><!-- #animation -->
</div><!-- #loading -->
<div id="contents">
<p>ローディングが完了しました！</p>
</div><!-- #contents -->まずはHTMLでローディング画面とローディング後の表示内容を作ります。
#loading要素がローディング画面になります。また、#contents要素がロードが完了した際に表示する内容になります。
#animation要素の中にローディング中のアイコンや文字を配置していきます。imgタグでローディングアイコンのGIF画像を指定してあげます。
CSS
index.css
#loading{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000;
z-index: 9000;
}
#animation{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
#animation img{
width: 50px;
height: 50px;
}次にCSSでローディング画面をデザインしていきます。
ローディング画面は画面いっぱいに表示されるようにCSSを記述していきます。
position: fixedで固定し、witdh: 100vwとheight: 100vhで画面いっぱいに表示されるようになります。また、ローディング後に表示させたい内容を隠すようにローディング画面を前面に表示するためz-index: 9000を指定します。
ローディングアイコンや文字の#animation要素をローディング画面中央になるように配置します。
jQuery
index.js
$(window).on('load', function(){
$('#loading').delay(900).fadeOut(800);
});
$(function(){
setTimeout('stopload()', 10000);
})
function stopload(){
$('#loading').delay(900).fadeOut(800);
}いよいよローディング画面の機能をjQueryで実装していきます。
$(window).on('load', '関数');で読み込み完了後に実行したい処理をコールバック関数で設定することができます。今回はローディング完了後に無名関数でローディング画面を非表示にする処理を指定しています。
読み込み後、#loading要素をdelayメソッドで0.9秒経過後fadeOutメソッドで0.8秒かけてフェードアウトしていきます。
また、10秒経っても読み込みが完了しなかった場合、強制的にローディング画面がフェードアウトするようにstopload関数を定義して、setTimeout関数で実行しています。
たったこれだけでローディング画面に実装ができました。意外と簡単だったのではないでしょうか？
CSSアニメーションでローディング画面を実装
ローディング画面の実装方法は上記で解説した通りです。ただ、上記の解説ではローディングアイコンはGIF画像を使用して実装していました。
ここではローディングアイコンをCSSアニメーションで実装する方法を解説します。
HTML
index.html
<div id="loading">
<div id="animation">
<div class="loading-circle"></div><!-- .loading-circle -->
<p>Now Loading...</p>
</div><!-- #animation -->
</div><!-- #loading -->
<div id="contents">
<p>ローディングが完了しました！</p>
</div><!-- #contents -->.loading-circle要素にCSSアニメーションでローディングアイコンを実装していきます。
CSS
index.css
#animation{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
animation: flush 1s linear 0s infinite;
}
@keyframes flush{
0%{
opacity: 0;
}
25%{
opacity: 0.5;
}
50%{
opacity: 1;
}
75%{
opacity: 0.5;
}
100%{
opacity: 0;
}
}
.loading-circle{
width: 100px;
height: 100px;
margin: 0 auto 20px;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
border-left: 10px solid #fff;
border-right: 10px solid transparent;
border-radius: 50%;
animation: spin 1s linear 0s infinite;
}
yframes spin{
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}ローディングアイコンと文字を配置している#animation要素を点滅させるようにflushアニメーションを定義しています。
animationプロパティのlinearを指定することで一定速度でアニメーションするようにしています。infiniteを指定するとアニメーションを無限ループしてくれます。
.loading-circle要素はクルクル回るアイコンを実装しています。border-radius: 50%で要素を丸くすることができます。ポイントはboderを上下左右のどこでもいいので１つだけtransparentで透明にして円を4分の1欠けるような見た目にします。この欠けた円を回転させることでローディング中であることを視覚的に分かるように伝えることができます。
円を回転させるアニメーションはspinアニメーションで定義しています。ここでもanimationプロパティにlinearとinfiniteを指定することで、ローディングが完了するまで一定速度で回転してくれます。
jQuery
index.js
$(window).on('load', function(){
$('#loading').delay(900).fadeOut(800);
});
$(function(){
setTimeout('stopload()', 10000);
})
function stopload(){
$('#loading').delay(900).fadeOut(800);
}jQueryで実装しているローディング画面の機能部分は上記でかいせつしたものですので、省略します。
CSSアニメーションは慣れるまで難しいかも知れませんが、是非こちらのサンプルコードを参考にして手を動かしてみてください。手を動かしながら少しずつ慣れていくことで理解が深まるでしょう。
