簡単に実装できる10種類のおしゃれなCSSスピナー「CSSPIN」!

2016/12/07

こんにちは。
今回は簡単に実装できる10種類のおしゃれなCSSスピナー「CSSPIN」!です。

divにクラスを付けるだけで、簡単に実装できる軽量スピナーを紹介します。

簡単に実装できる10種類のおしゃれなCSSスピナー「CSSPIN」!

CSSPIN

csspin

 

「CSSPIN」をダウンロードしてみよう!

https://github.com/webkul/csspinにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

「CSSPIN」を設置してみよう!

csspin.cssをhead内に読み込みます。

 

html部分を記述します。
divにcp-spinnerというクラスとそれぞれのクラスを付けるだけですよ。
Spinner Roundの場合は下記のように記述します。

 

Spinner Roundの他にもSpinner Pinwheel、Spinner Balls、Spinner Bubble、Spinner Flip、Spinner Hue、Spinner Skeleton、Spinner Eclipse、Spinner Boxes、Spinner Morphの10種類アニメーションが用意されていますよ。

 

現場でかならず使われている CSSデザインのメソッド
現場でかならず使われている CSSデザインのメソッド

 

いかがでしたか。実装が簡単でうれしいですね。
以上で簡単に実装できる10種類のおしゃれなCSSスピナー「CSSPIN」!でした。

Related Post

topへ戻る