コピペだけ！軽量！CSSだけでローディング画像を実装

ローディング画像といえば、gifアニメーションが一般的でしたが、CSS3を使えばJSなしで簡単にローディングアニメーションが作れます。

今回はどんなサイトにもマッチする、使いやすいローディングアニメーション「SpinKit」を使います。

▼ タイル（四角）が回転

See the Pen Loading1 by CreativeFlake (@creativeflake) on CodePen.

▼ 2つの円が弾む

See the Pen Loading2 by CreativeFlake (@creativeflake) on CodePen.

▼ ボリュームのように波打つ

See the Pen Loading3 by CreativeFlake (@creativeflake) on CodePen.

▼ 四角がくるくる

See the Pen Loading4 by CreativeFlake (@creativeflake) on CodePen.

▼ 円がフェードで点滅

See the Pen Loading5 by CreativeFlake (@creativeflake) on CodePen.

▼ 円が拡大縮小しながら回転

See the Pen Loading6 by CreativeFlake (@creativeflake) on CodePen.

▼ 3個の丸がフェードで拡大縮小

See the Pen Loading7 by CreativeFlake (@creativeflake) on CodePen.

▼ 丸がくるくる

See the Pen Loading8 by CreativeFlake (@creativeflake) on CodePen.

▼ バラバラタイル

See the Pen Loading9 by CreativeFlake (@creativeflake) on CodePen.

▼ 丸がくるくる

See the Pen Loading10 by CreativeFlake (@creativeflake) on CodePen.

▼ ぱたぱたタイル

See the Pen Loading11 by CreativeFlake (@creativeflake) on CodePen.

---

色のカスタマイズ方法は、CSS中のスピナー（ここでは .spinner）のbackgroundを変更するだけです。

Written by Creative Flake