[CSS]レトロなデザインがいいね!CSSアニメーションで実装されたローディング用のスピナー
Post on:2015年8月10日
画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015081001.png)
スピナーは全部で12種類、レトロ感のあるデザインが素敵ですね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015081003-01.gif)
スピナー1-6
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015081003-02.gif)
スピナー7-12
実装は、下記ページで確認できます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015081002.png)
HTMLはすべて、divタグ一つでシンプルな実装です。
例えば、一つ目の「Circle」はこんな感じ。
HTML
<div class="sp sp-circle"></div>
sponsors