jQueryで実装する！シンプルなローディングアニメーション
今回は、ページの読み込み時にjQueryで実装する！シンプルなローディングアニメーションの実装方法につきまして、実際にサンプルコードを用いて、詳しく記載していこうと思います。
前回、jQueryを使ったプログレスバーの実装方法を記載いたしましたが、「これでは多少難しい！」「もっと簡単に短いコードで実装したい！」という方のために、今回は、jQueryでシンプルに実装できるローディングアニメーションにつきまして、詳しく記載しようと思います。jQueryのコード自体は、とても短く初心者の方でも簡単に理解できることと思います。
という事で、それでは今回はッ、
- ・ローディングアニメーション表示機能の概要
- ・ローディングアニメーション表示に必要な処理
- ・ローディングアニメーションHTMLとCSS
- ・アニメーションGif・CSSサイトのご紹介！
- ・ローディングアニメーションのjQuery
上記について記載していこうと思います…。
ローディングアニメーション表示機能の概要
まずは、私が以前作成しましたサンプルから….。
ローディングアニメーション表示機能の概要は、前回記載しました「jQueryで実装するページローディングのプログレスバー
」とほぼ同じになります。
要約すると、「ページファイルの読み込みに多少時間がかかりそうな場合に、アニメーションを利用して、ページを読みこんでいることをユーザーに分かりやすく伝えることが目的となります。」
今回記載するローディングアニメーションは、かなり以前から使用されている方法で、もともとは「動くGIF」を利用していましたが、ここ最近では「CSS3」でアニメーションを実現しているサイトを多く見受けることができるようになりました。また、どちらの方法を利用したとしても、jQueryのコード自体はほぼ同じもので何ら変わりなく、今回ご紹介するCSS3のアニメーションを紹介しているサイトを参考にすれば、アニメーションGifよりも、コピーペーストだけでCSSに記述できることから、手間がかからずに実装できることと思います。
ローディングアニメーション表示に必要な処理
ローディングアニメーション表示を実現するには、主に以下の処理が必要になります。
- ・読み込みが完了したらローディングアニメーションを非表示にする処理
- ・決められた時間経過後ローディングアニメーションを強制的に非表示にする処理
ここでは、まず初めにページ自体の読み込みが完了するまで、ローディングアニメーションを表示しておき、jQueryで読み込みの完了確認が取れ次第、ローディングアニメーションを非表示にして、コンテンツを表示させる順序になります。また、補足要素として、ある一定程度、例えば10秒経過しても読み込みが完了しない場合は、強制的にローディングアニメーションを非表示にします。
ローディングアニメーションHTMLとCSS
今回記載するローディングアニメーションは、サンプルでは動くGifを使うのでHTMLとCSSには特に難しい個所はありません。また、動くGifではなく、CSS3でアニメーションを実装する場合は、アニメーション用CSSが多少複雑になりますが、下記に紹介いたしますので、何ら問題ないことと思います。要素の入れ替えだけの処理で実装できることと思います。
<div id=”loader”>
<img src=”images/gif-load.gif” width=”30″ height=”30″ alt=”Now Loading…”>
<p>Now Loading…</p>
</div>
</div>
<div id=”loader”>Now Loading…</div>
</div>
</div>
| #loader-bg { |
| position: fixed; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| background: #feadb6; |
| z-index: 1; |
| } |
| #loader { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| width: 65px; |
| height: 65px; |
| margin-top: -32.5px; |
| margin-left: -32.5px; |
| text-align: center; |
| color: #fff; |
| z-index: 2; |
| } |
| #loader-bg { |
| position: fixed; |
| width: 100vw; |
| height: 100vh; |
| top: 0; |
| left: 0; |
| background: #feadb6; |
| z-index: 1; |
| } |
| #loader { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 65px; |
| transform: translate(-50%, -50%); |
| color: #fff; |
| animation: loadinganimation 1500ms ease-out forwards infinite; |
| } |
| @keyframes loadinganimation { |
| from,to { |
| opacity: 0; |
| } |
| 50% { |
| opacity: .5; |
| } |
| } |
上記2種類、「動くGIF」を使った場合と、「CSS3」でアニメーションを実装した場合のHTMLとCSSを記述しました。どちらも簡単なことと思います。どちらも#loader-bgの背景に#loderでアニメーションを記述しています。
「動くGIF」はその下にテキストも記述してあります。「CSS3」ヴァージョンは、アニメーション部分に keyframeアニメーションを使って、文字の透明度を変化させています。
アニメーションGif・CSSサイトのご紹介！
それでは、jQueryのコードを記載したい所ですが、その前に、ローディングアニメーションで使えるアニメーションGifとアニメーションCSSを紹介しているサイトをご紹介いたします。
アニメーションGifフリー素材サイト
フリーデザイン素材「ローディングのくるくるアニメーションGIFがいっぱい」
アニメーションCSSフリー素材サイト
Spinners & Page Loaders Pure CSS
上記どれを選んでも楽しく、ローディングアニメーションが作成できることと思いますが、本来の目的である「ページを読みこんでいることをユーザーに分かりやすく伝える」ことを忘れないようにすることを、おすすめいたします。
ローディングアニメーションのjQuery
それでは、jQueryのコードを記述してみます。
$(‘#loader-bg’).delay(1000).fadeOut(300);——②// 消えるタイミングはdelayで指定
$(‘#loader’).delay(600).fadeOut(300);——③
function stopload(){ // 10秒待っても読み込みが終わらない時は強制的にフェードアウト
$(‘#loader-bg,#loader’).delay(1000).fadeOut(700);
}
setTimeout(‘stopload()’,10000); ——④// 10秒待処理
});
非常にシンプルで簡単ですね。①ですべて読みこんだら実行の$(window).load(function ()になります。②では、すべてページを読みこんだ1秒後に0.3秒かけてフェードアウトするよう指定しています。③では、背景が消える0.4秒前に#loader要素が消えるように指定していますが、特に同じでも問題ありません。
④は、ページの読み込みが10秒たっても読み込みが完了しない場合、強制的にsetTimeoutで読み込みを止め、#loader-bg要素をフェードアウトするように指定しています。
ということで今回は、jQueryで実装する！シンプルなローディングアニメーションにつきまして、サンプルコードを交え記載いたしました。
前回と比べ、とても簡単に実装できることが理解できたことと思います。また、ローディングアニメーションにCSSを使用すると、見た目に大変面白いものもありますが、個人的には極力シンプルなマークアップで、読み込み自体は速く読みこめるようなコーディングが望ましいように思いますが、ファーストビューにビデオ要素などを入れ込む場合は、ぜひともローディングアニメーションを使用することをおすすめいたします。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- jQuery, サンプル, ローディングアニメーション
