お疲れさまです、モモコです。
ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。
今回はCSS3だけで作れるローディングアニメーションを5つご紹介します！
閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。
FADE LOADING
入力した文字がふわっと浮かび上がるローディングアニメーション。
質感と動きが合っていてがとてもエレガントです。
CSS3 loading animation experiment
CSS3 loading animation experiment
DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。
多彩な変化がついており、とてもクールなアニメーションになっています。
CSS only loading spinners
色々なデザインに使用し易く汎用性のあるローディングアニメーション。
チュートリアルではJavascriptで実装するためのコードも掲載されています。
CSS3 Loading Animation Loop
円を基調としたスタイリッシュなローディングアニメーション。
此処までCSS3だけで出来てしまうなんて驚きです…！
Creative CSS Loading Animations
Creative CSS Loading Animations
5つの格好良いローディングアニメーションのチュートリアルを掲載している記事。
どのアニメーションも丁寧に作られており、使い勝手が良さそうです。
まとめ
完璧に対応しているブラウザはまだ少ないですが、CSS3のアニメーションの勉強も兼ねて
モダンブラウザ対象の場合には是非使用していきたいと思います。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
