[CSS]レトロなデザインがいいね!CSSアニメーションで実装されたローディング用のスピナー

画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。

デモのキャプチャ

CSS Loading Spinners

スピナーは全部で12種類、レトロ感のあるデザインが素敵ですね。

デモのアニメーション

スピナー1-6

デモのアニメーション

スピナー7-12

実装は、下記ページで確認できます。

デモのキャプチャ

CSS Loading Spinners

HTMLはすべて、divタグ一つでシンプルな実装です。
例えば、一つ目の「Circle」はこんな感じ。

HTML

<div class="sp sp-circle"></div>

top of page

©2017 coliss