コピペでリッチなCSSアニメーションを実装できる「loading.io」

loading.io とは

ロード画面に表示させるアニメーションや、アニメーション付きのボタンアイコンなどを提供するwebサービスです。

バリエーション豊富なアニメーションをすぐに実装できる

loading.ioで提供しているパーツにはこんな物があります。

スピナー

See the Pen LwOJox by wish911wish (@wish911wish) on CodePen.

アニメーション付きのアイコン

See the Pen jONQYVO by wish911wish (@wish911wish) on CodePen.

このようなアニメーションをJavaScriptを使用する事なく、 loading.ioから提示されるHTMLとCSSを書き込むだけで手軽に実装できます。

また、その他にも、 背景用のSVG画像や、Javascriptを使用したロード用のアニメーション や、Bootstrapと組み合わせたボタンなど様々なパーツが提供されています。

背景用のSVG画像

See the Pen OJLazvY by wish911wish (@wish911wish) on CodePen.

ロード用のアニメーション

See the Pen JgOLpw by wish911wish (@wish911wish) on CodePen.

まとめ

以上簡単ですが、loading.ioの紹介でした。簡単にアニメーションを実装できますので、よかったら使ってみてはいかがでしょうか。