ホームページ、ページのカスタマイズなど、お客様のEC事業をレベルアップいたします。jQueryjQueryで実装する!シンプルなローディングアニメーション今回は、ページの読み込み時にjQueryで実装する!シンプルなローディングアニメーションの実装方法につきまして、実際にサンプルコードを用いて、詳しく記載していこうと思います。前回、jQueryを使ったプログレスバーの実装方法を記載いたしましたが、「これでは多少難しい!」「もっと簡単に短いコードで実装したい!」という方のために、今回は、jQueryでシンプルに実装できるローディングアニメーションにつきまして、詳しく記載しようと思います。jQueryのコード自体は、とても短く初心者の方でも簡単に理解できることと思います。・ローディングアニメーションHTMLとCSS・アニメーションGif・CSSサイトのご紹介!・ローディングアニメーションのjQuery上記について記載していこうと思います...。ローディングアニメーション表示機能の概要まずは、私が以前作成しましたサンプルから....。」とほぼ同じになります。今回は、ページの読み込み時、jQueryを使い進捗状況をプログレスバーで表示する方法を、実際にサンプルコードを用いて、詳しく記載していこうと思います。ページを読み込む際、jQuer...要約すると、「ページファイルの読み込みに多少時間がかかりそうな場合に、アニメーションを利用して、ページを読みこんでいることをユーザーに分かりやすく伝えることが目的となります。今回記載するローディングアニメーションは、かなり以前から使用されている方法で、もともとは「動くGIF」を利用していましたが、ここ最近では「CSS3」でアニメーションを実現しているサイトを多く見受けることができるようになりました。どちらの方法を利用したとしても、jQueryのコード自体はほぼ同じもので何ら変わりなく、今回ご紹介するCSS3のアニメーションを紹介しているサイトを参考にすれば、アニメーションGifよりも、コピーペーストだけでCSSに記述できることから、手間がかからずに実装できることと思います。ローディングアニメーション表示に必要な処理ローディングアニメーション表示を実現するには、主に以下の処理が必要になります。・決められた時間経過後ローディングアニメーションを強制的に非表示にする処理ここでは、まず初めにページ自体の読み込みが完了するまで、ローディングアニメーションを表示しておき、jQueryで読み込みの完了確認が取れ次第、ローディングアニメーションを非表示にして、コンテンツを表示させる順序になります。補足要素として、ある一定程度、例えば10秒経過しても読み込みが完了しない場合は、強制的にローディングアニメーションを非表示にします。ローディングアニメーションHTMLとCSS今回記載するローディングアニメーションは、サンプルでは動くGifを使うのでHTMLとCSSには特に難しい個所はありません。動くGifではなく、CSS3でアニメーションを実装する場合は、アニメーション用CSSが多少複雑になりますが、下記に紹介いたしますので、何ら問題ないことと思います。要素の入れ替えだけの処理で実装できることと思います。.5;}}上記2種類、「動くGIF」を使った場合と、「CSS3」でアニメーションを実装した場合のHTMLとCSSを記述しました。どちらも簡単なことと思います。どちらも#loader-bgの背景に#loderでアニメーションを記述しています。「動くGIF」はその下にテキストも記述してあります。keyframeアニメーションを使って、文字の透明度を変化させています。アニメーションGif・CSSサイトのご紹介!それでは、jQueryのコードを記載したい所ですが、その前に、ローディングアニメーションで使えるアニメーションGifとアニメーションCSSを紹介しているサイトをご紹介いたします。CSS上記どれを選んでも楽しく、ローディングアニメーションが作成できることと思いますが、本来の目的である「ページを読みこんでいることをユーザーに分かりやすく伝える」ことを忘れないようにすることを、おすすめいたします。ローディングアニメーションのjQueryそれでは、jQueryのコードを記述してみます。10秒待処理});非常にシンプルで簡単ですね。2では、すべてページを読みこんだ1秒後に0.3秒かけてフェードアウトするよう指定しています。3では、背景が消える0.4秒前に#loader要素が消えるように指定していますが、特に同じでも問題ありません。4は、ページの読み込みが10秒たっても読み込みが完了しない場合、強制的にsetTimeoutで読み込みを止め、#loader-bg要素をフェードアウトするように指定しています。いうことで今回は、jQueryで実装する!シンプルなローディングアニメーションにつきまして、サンプルコードを交え記載いたしました。前回と比べ、とても簡単に実装できることが理解できたことと思います。ローディングアニメーションにCSSを使用すると、見た目に大変面白いものもありますが、個人的には極力シンプルなマークアップで、読み込み自体は速く読みこめるようなコーディングが望ましいように思いますが、ファーストビューにビデオ要素などを入れ込む場合は、ぜひともローディングアニメーションを使用することをおすすめいたします。今回はここまで...。お仕事のご依頼は↓コチラより...、それではまた次回...。私はWeb制作をすべて独学で勉強してきました。今も継続中で、すでに16年ほど勉強中です。