コーディング Web制作 CSS アニメーション

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

CSSだけで実装出来るローディングアニメーション Loaders.cssの使い方
ページ読み込み中のローディングアニメーションってどこで手に入るんだろう?

ローディングアニメーションやgif画像を公開してるサイトはたくさんありますが、今回はgif画像ではなくCSSのみで実装できるLoaders.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を見ると分かりやすいと思います。

以上です。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, CSS, アニメーション