ローディングアニメーションやgif画像を公開してるサイトはたくさんありますが、今回はgif画像ではなくCSSのみで実装できるLoaders.cssの使い方をご紹介します。
Loaders.cssのファイルをダウンロード
まずは以下のページにアクセスします。
このページに実装できるアニメーションのデモが28種類表示されています。
ダウンロードは画面右上のView on Githubをクリックします。
すると次のような画面になるので、右上のClone or downloadをクリックし、その右のDownloadをクリックしてダウンロードします。
ファイルを解凍し、中を見てみると以下のファイルが入っています。
使用するのはloaders.min.cssになります。
ちなみにdemoフォルダに入っているdemo.htmlを開くと先ほどのデモページと同じ画面が開きます。
loaders.min.cssを読み込む
先ほどのloaders.min.cssをcssフォルダに入れ、HTMLのheadタグに読み込む為のコードを書きます。
<link href="css/loaders.min.css" rel="stylesheet" />
使いたいアニメーションのHTMLをコピペ
そして使いたいアニメーションを探すには、demo.htmlを見てみます。
ファイルは沢山ありますが、demo.htmlだけ見ればOKです。
そしてどの部分をコピーするかですが、<div class="loader"></div>の部分になります。
そして青枠の部分がアニメーションの名前です。
このファイルに全てのアニメーションのコードが書いてあるので、ここからお好みのアニメーションを探してみて下さい。
ただ、このコードを張り付けただけだとアニメーションが出っぱなしになってしまうので、jQueryでフェードアウトさせる必要があります。
その方法は以下の記事を参照下さい。
この記事のimgタグの部分を<div class="loader"></div>に置き換えればOKです。
コピペでOK！ページ読み込み中に表示するローディングの作り方
補足
アニメーションの色を変えたりカスタマイズしたい時は、loaders.cssを見ると分かりやすいと思います。
以上です。