CSSだけで実装出来るローディングアニメーション「Loaders.css」の使い方

CSS


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

ページ読み込み中のローディングアニメーションってどこで手に入るんだろう?

 

 

といった方に対する記事となります。

ローディングアニメーションや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です。

 

補足
アニメーションの色を変えたりカスタマイズしたい時は、loaders.cssを見ると分かりやすいと思います。

以上です。