CSSだけで実装できる28種類のローディングアニメーション Loaders.css

Loaders.cssは、CSSだけで実装できる28種類のローディングアニメーションのライブラリです。

↓様々なローディングアニメーションを実装できます。

loaders-css

loaders-css3

スポンサーリンク

デモ

デモページを用意します。

実装方法

GitHub右上の「Download.zip」からzipファイルをダウンロードします。

download

loaders.min.cssを読み込みます。

HTMLを用意します。

div要素にアニメーション用のクラス名を付けます。クラス名のloader-innerは共通です。ball-pulseの部分を変更すると、アニメーションが変わります。

クラス名を付けたdiv要素の中に、空の<div></div>を複数入れます。この空divが、アニメーションで動く丸や四角の点や線になります。必要な空divの数はアニメーションによって変わってくるので、デモファイル(demoフォルダに入っているdemo.html)で確認してください。

これだけで、ローディングアニメーションの実装は完了です。

loaders-css4

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 1,208