ローディング画像といえば、gifアニメーションが一般的でしたが、CSS3を使えばJSなしで簡単にローディングアニメーションが作れます。
今回はどんなサイトにもマッチする、使いやすいローディングアニメーション「SpinKit」を使います。
▼ タイル(四角)が回転
▼ 2つの円が弾む
▼ ボリュームのように波打つ
▼ 四角がくるくる
▼ 円がフェードで点滅
▼ 円が拡大縮小しながら回転
▼ 3個の丸がフェードで拡大縮小
▼ 丸がくるくる
▼ バラバラタイル
▼ 丸がくるくる
▼ ぱたぱたタイル
色のカスタマイズ方法は、CSS中のスピナー(ここでは .spinner)のbackgroundを変更するだけです。
今回はどんなサイトにもマッチする、使いやすいローディングアニメーション「SpinKit」を使います。
▼ タイル(四角)が回転
▼ 2つの円が弾む
▼ ボリュームのように波打つ
▼ 四角がくるくる
▼ 円がフェードで点滅
▼ 円が拡大縮小しながら回転
▼ 3個の丸がフェードで拡大縮小
▼ 丸がくるくる
▼ バラバラタイル
▼ 丸がくるくる
▼ ぱたぱたタイル
色のカスタマイズ方法は、CSS中のスピナー(ここでは .spinner)のbackgroundを変更するだけです。
Written by Creative Flake
コメント
コメントを投稿