CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

2014.03.7

CSSだけでローディングアニメーションを実装できる「(cs)spinner」がとてもよかったのでご紹介。スタイルシートを読み込んで指定のクラスを付与するだけで使う事ができます。色んなパターンから選ぶことができて、どれもミニマルなデザインがとても素敵です。

[ads_center]

(cs)spinnerの使い方

以下は実際に使って試してみたものです。こんな感じのローディングアニメーションを表示させることができます。

バーになっているタイプや、

シャドウがかかっているタイプまで様々なデザインから選択できます。

使い方は、(cs)spinnerからダウンロードしたCSSファイルを読み込んで以下のようにHTMLを記述するだけです。csspinnerというクラス名を付与します。もう1つあるクラス（ここではtraditional）がローディングアニメーションのタイプになります。

&lt;div class=&quot;csspinner traditional&quot;&gt;&lt;/div&gt;

色んなタイプがあるので自分の好きなものを指定することが可能です。

画像いらずで手間もかからないのでかなり便利ですね。