開発コストを削減「ラボ開発」って?
開発コストを削減「ラボ開発」って?
2013.08.07

CSS3だけで作れる格好良いローディングアニメーション5つ!

モモコ

お疲れさまです、モモコです。
ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。
今回はCSS3だけで作れるローディングアニメーションを5つご紹介します!
閲覧の際にはモダンブラウザ(最新のGoogleChromeなど)をご利用下さい。

FADE LOADING

FADE LOADING

入力した文字がふわっと浮かび上がるローディングアニメーション。
質感と動きが合っていてがとてもエレガントです。

CSS3 loading animation experiment

CSS3 loading animation experiment

DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。
多彩な変化がついており、とてもクールなアニメーションになっています。

CSS only loading spinners

CSS only loading spinners

色々なデザインに使用し易く汎用性のあるローディングアニメーション。
チュートリアルではJavascriptで実装するためのコードも掲載されています。

CSS3 Loading Animation Loop

CSS3 Loading Animation Loop

円を基調としたスタイリッシュなローディングアニメーション。
此処までCSS3だけで出来てしまうなんて驚きです…!

Creative CSS Loading Animations

Creative CSS Loading Animations

5つの格好良いローディングアニメーションのチュートリアルを掲載している記事。
どのアニメーションも丁寧に作られており、使い勝手が良さそうです。

まとめ

完璧に対応しているブラウザはまだ少ないですが、CSS3のアニメーションの勉強も兼ねて
モダンブラウザ対象の場合には是非使用していきたいと思います。