制作のご相談はこちら
使いやすいローディング用CSSアニメーションアイコン

2017年11月17日

使いやすいローディング用CSSアニメーションアイコン

ページを読み込む際に使うローディング用のアイコン。
サイトのイメージと合わせるために、どんなデザインにするか迷う方もいらっしゃるかと思います。
今回は画像やJavascriptを使わずCSSで作れるアニメーションを公開しているページをまとめました。
様々なジャンルに使いやすいデザインですので、お困りの方はぜひ探してみてください。

シンプルなスピナー集 その1


Single Element CSS Spinners

シンプルなスピナー集 その2


Loaders.css

シンプルなスピナー集 その3


SpinKit | Simple CSS Spinners

カラフル系


Creating a Collection of CSS3 Animated Pre-loaders

デジタル系


CSS3 Loading Animation Loop

文字が浮かび上がる


fade loading

ぬるっと回る


Loader #7 – Circular

バーが上下する


Yet another loading animation

文字がプログレスバー


dabblet

ミニマムなスピナー


CSS Loading Spinners