実装はとっても簡単!アニメーションが気持ちよく、デザインもかわいいCSSで実装された軽量スピナー -CSSPIN

ページやコンテンツのローディング時によく使われる、アニメーションが気持ちよく、デザインもかわいいCSSで実装されたスピナーを紹介します。

実装はdivひとつのミニマルなHTMLで、とっても簡単です。

デモのキャプチャデモのキャプチャ

CSSPIN
CSSPIN -GitHub

CSSPINの使い方

当スタイルシートを外部ファイルとして記述します。

全種類が入ったCSSは「csspin.css」で、それぞれ単独のCSSも用意されています。

準備はこれで完了です。
あとは、スピナーを空のdiv要素で配置するだけOK。

CSSPINのデモ

各スピナーの実装も非常に簡単です。
空のdiv要素に「.cp-spinner」を与え、スピナーの種類を指定します。

top of page

©2017 coliss