実装はとっても簡単！アニメーションが気持ちよく、デザインもかわいいCSSで実装された軽量スピナー -CSSPIN
Post on:2016年11月22日
sponsors
ページやコンテンツのローディング時によく使われる、アニメーションが気持ちよく、デザインもかわいいCSSで実装されたスピナーを紹介します。
実装はdivひとつのミニマルなHTMLで、とっても簡単です。
CSSPINの使い方
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" type="text/css" href="csspin.css" /> </head> |
全種類が入ったCSSは「csspin.css」で、それぞれ単独のCSSも用意されています。
準備はこれで完了です。
あとは、スピナーを空のdiv要素で配置するだけOK。
CSSPINのデモ
各スピナーの実装も非常に簡単です。
空のdiv要素に「.cp-spinner」を与え、スピナーの種類を指定します。
|
1 |
<div class="cp-spinner cp-round"></div> |
|
1 |
<div class="cp-spinner cp-pinwheel"></div> |
|
1 |
<div class="cp-spinner cp-balls"></div> |
|
1 |
<div class="cp-spinner cp-bubble"></div> |
|
1 |
<div class="cp-spinner cp-flip"></div> |
|
1 |
<div class="cp-spinner cp-hue"></div> |
|
1 |
<div class="cp-spinner cp-skeleton"></div> |
|
1 |
<div class="cp-spinner cp-eclipse"></div> |
|
1 |
<div class="cp-spinner cp-boxes"></div> |
|
1 |
<div class="cp-spinner cp-morph"></div> |
sponsors
