• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

CSS Load.net へアクセス

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

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


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

まずは「Select your loader」よりアニメーションの種類を選択します。
CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」

続いて、アニメーションの色を選択します。
CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」

アニメーションの背景色も「白」「黒」「指定色」「透明」から選択できます。
CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」

アニメーションの大きさ(width、height)やスピードを選びます。
CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」

コード出力

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

あとはこれをCSS ファイルにコピペすれば完成です。
CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」

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

試しに作ってみました。



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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください