CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」

loading 画像が簡単に作れるサービス の記事でも紹介させていただいた Ajaxload を使えば loading 画像を作成できますが、今回紹介させていただく CSS Load.net を利用すれば「CSS のみ」によるローディングアニメーションを簡単に作ることができます。

ローディングの大きさや色、スピードを設定すれば CSS ファイルに記述するコードが出力されますので便利です。

CSS Load.net へアクセス

以下のページから CSS Load.net へアクセスします。

ローディングアニメーションの設定

まずは「Select your loader」よりアニメーションの種類を選択します。


続いて、アニメーションの色を選択します。


アニメーションの背景色も「白」「黒」「指定色」「透明」から選択できます。


アニメーションの大きさ（width、height）やスピードを選びます。

コード出力

「GET CODE」ボタンをクリックすれば、CSS3 の animation によるローディングアニメーション用のコードが出力されます。

あとはこれをCSS ファイルにコピペすれば完成です。

CSS によるローディングアニメーションのサンプル

試しに作ってみました。



PCサイトだとIE の問題もあるので難しいかもしれませんが、スマホサイトなどではloading 用の画像ファイルを用意しなくていいので便利かもしれませんね。