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


情報量が多いサイトだと読み込むまでに時間がかかり、レイアウトが崩れたかのように見えてしまう場合があります。
そんな時、読み込みの時間がかかるサイトやスライダーなどにローディングアニメーションを実装することがあります。

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

仕組みとしては、すべての読み込みが完了するまでに、コンテンツ部分は非表示にして、ローディング画面を表示させている状態になっています。

ローディング用のgifですが、cssでも用意することができます。

CSSで作成すれば、JavaScriptよりも簡単にアニメーションを作ることができる上、ブラウザの処理にも負担をかけないでしょう。

実装には、CSS3のanimation プロパティを使用します。
Loaders.css

id=”loading”に対して、上記のサイトのcssを適用するだけで、いろいろなアニメーションを設定することができます。