Blog

CSSのみで実装されてるローディングアニメーション

2015.06.16Cat:css3 デザイナー

ローディングアニメーションって画像として作るのは少し面倒くさいこともあり、2,3パターン作ってから全く作ってないのですが、CSSのみで出来るとなればいろんなパターンを作ってみたくなりますね!

今回は以下のサイトを元に自分で少し試してみました。
15パターンのローディングアニメーションがあり、ダウンロード無料です。
css-spinners

私が作ったのは以下からご覧下さい。
DEMO

CSSのkeyframesやCSS3の装飾を使ってやってます。

参考サイトを見ると、複雑なやつはソースが凄いことになっています。。。

IE10以上の対応にはなりますが、基本はIE10,11が多いと思いますし、
IE9の方でもローディング自体あってもなくてもコンテンツ自体には問題はないので
ローディンはグ画像ではなく、CSSで作るもので充分な気がしますね!!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ