【コピペOK】ローディングアニメーションをCSSとJavaScriptで実装しよう！

ローディングアニメーションとは

ローディングアニメーションとは、Webサイトやモバイルアプリ上でコンテンツの読み込みや処理が行われる際に一時的に表示されるアニメーションです。

ユーザーがページを開いたり、新しいコンテンツをロードしたりする際には、データの取得や処理に時間がかかる場合があります。
このような処理時間中に、ただ待たせるだけではユーザーエクスペリエンスが悪くなるため、その待ち時間を楽しく、興味を持ってもらえるようなアニメーションが用意されるのがローディングアニメーションです。

ローディングアニメーションを表示させるためには、メインのコンテンツを覆い、ローディングアニメーションの背景になるローディング画面も必要になります。

ローディングアニメーションの実装方法

１．ローディング画面を実装する

ローディング画面を作成し、メインのコンテンツの上に[position: fixed;]で重ねます。

２．ローディングアニメーションを実装する

ここでは、文字が上下にジャンプするシンプルなアニメーションを実装してみました。
CSSのtranslateY関数を使用して要素を垂直方向に動かすことで、文字が上下にジャンプするアニメーションを実現しています。
0%のキーフレームでは要素は中央に位置し、50%のキーフレームで上に20ピクセル移動し、最後に100%のキーフレームで元の位置に戻ります。

３．ローディング画面を制御する

ページのローディングの完了後、 js-loadedクラスを追加するようJavaScriptを記述します。
JavaScriptでjs-loadedクラスが追加された際、CSSでローディング画面を非表示にします。

ローディングアニメーションを簡単に実装する方法

実際のWebサイトでは、円がくるくる回ったり、ページの読み込み状況を表示したり、複雑なローディングアニメーションを見かけると思います。
一から自分で作るとなると大変かと思いますが、配布されているコードやライブラリが多々ありますのでいくつか紹介します。
これらを利用してアニメーションを作成することで、実装負担がぐっと減るので是非ご覧ください。

＜ Single Element CSS Spinners ＞

汎用性の高く、いろんなタイプのサイトにマッチしそうなCSS アニメーションが揃っています。
各アニメーションの下にある「View Source」をクリックするとHTML・CSSのコードが表示され、画面左上の「BG」や「FG」から色の変更もできます。
各アニメーションにはpx単位のフォントサイズが与えられており、font-sizeを変更するだけでサイズを変更が可能です。
https://projects.lukehaas.me/css-loaders/

＜ SpinKit ＞

こちらもシンプルで使いやすそうなCSS アニメーションが用意されています。
左右に表示された矢印をクリックして、全12種類のCSS アニメーションを閲覧できます。
画面上部の「Source」をクリックするとHTML・CSSのコードが表示されます。
https://tobiasahlin.com/spinkit/

＜ Epic Spinners ＞

定番の形から少し変わったものまで、シンプルなデザインながら複雑な動きを楽しめるアニメーションが豊富です。
全14種類のローディングアニメーションが用意されており、jQueryなどのライブラリにも依存していないので簡単に導入したい時におすすめです。
https://epic-spinners.epicmax.co/

＜ PACE ＞

PACEはファイルを読み込むだけで、ローディングアニメーション・画面を実装できるプラグインです。
各アニメーションをクリックするとHTML・CSSコードが表示されます。
https://codebyzach.github.io/pace/

基本的な使い方は以下の通りです。
➀pace.jsを読み込む
CDN、もしくはGitHubよりファイルをダウンロードしheadタグ内に記載します。今回はCDNで読み込んでいます。

➁実装したいテーマを選択し、CSSをダウンロードする
公式サイトの「Themes」にて、実装したいローディングアニメーションを選択し「DOWNLOAD」をクリックしてファイルをダウンロードします。「CHOOSE A COLOR」よりローディングアニメーションの色を変更することも可能です。今回は「Center Atom」を選択して進めます。

➂ダウンロードしたCSSを読み込む
ダウンロードしたCSSを格納しheadタグで読み込むか、ダウンロードしたファイルを開き記載されているコードを直接CSSファイルに記載してください。今回は、直接CSSファイルに記載しています。

上記ステップで、以下のようなローディングアニメーションを実装できます。（ローディングアニメーションが完了している場合は、リロードしてご確認ください。）

本記事ではPACEプラグインを使用して、「数字をカウントするローディングアニメーション」「プログレスバーを設置したローディングアニメーション」を実装していますので参考にしてみてください。
サンプルコードではJavaScriptやCSSを追加し、より見やすくなるようメインコンテンツの表示方法などを制御しています。

コピペで使えるローディングアニメーションのサンプルコード

ローディングアニメーションを実装するメリット

コンテンツの読み込みを視覚的に示すことができる

ローディングアニメーションは、ユーザーにコンテンツの読み込みが進行中であることを視覚的に示します。これにより、ユーザーがウェブサイトやアプリの動作が停止しているわけではないと理解しやすくなります。

コンテンツの遅延を隠すことができる

ネットワークの遅延やデータの処理による待ち時間を、ユーザーに気づかれずに隠すことで、コンテンツの読み込み時間を軽減します。

ユーザーエクスペリエンスが向上する

コンテンツの読み込みや処理を待つ退屈な時間を楽しいものに変えることで、ユーザーの待ち時間のストレスを軽減することができます。

ローディングアニメーションを実装するデメリット

パフォーマンスが低下する可能性がある

複雑なローディングアニメーションや大きなファイルサイズのアニメーションを使用すると、ページの読み込み速度が低下する場合があります。ユーザーにとって待ち時間が増えることで、逆にユーザーエクスペリエンスが悪化する恐れがあります。特にモバイルデバイスの場合に、ページの読み込み時間やパフォーマンスに影響を与えることがあります。

まとめ

ローディングアニメーションはウェブサイトやアプリのユーザーエクスペリエンスを向上させる効果がありますが、適切に設計し、パフォーマンスやアクセシビリティの問題に注意する必要があります。
ユーザーのニーズとコンテキストを考慮した上で、魅力的で使いやすいローディングアニメーションを実装することが重要です。