よこのじ（@yokonoji_work）です。
ページ読み込み時間の短さはユーザーにストレスなく閲覧してもらうために必要なことですが、画像や動画などのコンテンツが多くなってくると、どうしても読み込みに時間がかかってしまいます。
そこで、Now Loading…のような画面を用意することで、ロード中であることを感じさせない工夫が必要となってきます。
今回は簡単にローディングアニメーションを実装するための参考サイトを集めてみましたので、ご紹介します。
コピペで実装できますので、お気に入りのものを見つけてください。
ローディングアニメーションの参考サイト
ローディングバー、スピンなどのスニペットを紹介しているサイトは多くあります。
ここでは、私に響いた美しいローディングアニメーションが紹介されているサイトを一覧でご紹介します。
ここは見るべき！という気に入った順番で紹介していますが、どのサイトも大変素晴らしいということはお伝えしておきたいと思います。
Single Element CSS Spinners
くるくると回転するタイプのアニメーションを中心に基本的なデザインが揃っています。ソースコードはアニメーション下の<View Source>より確認できます。
作者の他のプロジェクトであるCSSPokemonも一見の価値ありです。
PACE
CSSとJavaScriptを組み合わせて、ページの読み込みを進捗バーや％表示で表現できます。あとどれだけ待てば読み込みが完了するのかわかるようになる、うれしい機能を簡単に実装できます。
SVG-Loaders
SVG形式の画像を使うことでローディングアニメーションを表現できます。基本的なアニメーションパターンですが、高品位な印象を受けます。
Loaders.css
CSSでつくられたローディングアニメーションのデモ一覧を見ることができます。ただ回転するだけではない工夫があるので、楽しいアニメーションになっています。
Loading.io
くるくる回るアニメーションや進捗度を表示できるプログレスバーなどを実装できます。
有料プランであれば、より目を引く楽しげなデザインも利用できます。プログレスバーの方は、実績件数のような表示に利用できそうですね。
SpinKit
基本的なアニメーションが揃っています。動きがリズミカルでロード中に待たされているということが感じにくくなりそうです。ソースコードはアニメーション上部の<>Sourceより確認できます。
その他プロジェクトのMoving Lettersを利用すれば、動きのある華やかなWebサイトをつくることができそうです。
30 CSS Loading Animations for your Website
ありきたりなアニメーションではないものを使いたいと思ったら、ここを見てみてください。電池が充電されたり、車が走ったり、本でドミノ倒しされていたり、見る人を飽きさせないアニメーションが揃っています。
83 CSS Loaders
83のアニメーションが紹介されています。シンプルなもの、かわいいもの、かっこいいものなど自身のサイトのイメージに合ったものが見つかるのではないでしょうか？フライパンをパンケーキを振り上げてひっくり返す、ユニークなものもあります。
他のサイトでの紹介では「71 CSS LOADERS」となっていましたので、どんどん追加されてる？
CSS Loader
ボールが跳ねたり、スマートフォンが揺れたり、画面全体をブロックが走ったりと多彩な表現があります。遊び心を取り入れたい場合には、うってつけです。
注目記事：CSSアニメーション animationプロパティの使い方
注目記事：CSSアニメーションで「バウンド」を実装する
[itemlink post_id=”3055″]
