実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー

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

divひとつのミニマルなHTMLで、簡単に実装できます。

CSS Spinners
CSS Spinners -GitHub

各スピナーのアニメーションは、それぞれデザインにあった面白い動きをします。
いつものようにアニメーションGIFにしてみました。

かわいいアニメーションのスピナーたち

自分のWebページにも簡単に実装できます。
上のキャプチャには含めていない「弾むボール」を実装してみました。

スピナーの実装

実装は、簡単です。
「弾むボール」を例に、説明します。

Step 1: 外部ファイル

各スピナーに用意されているCSSファイルを外部ファイルとして記述します。

[html]

...
[/html]

CSSは個別用と全部用があり、全部用は「spinners.css」です。

[html]

...
[/html]

Step 2: HTML

あとは、各スピナーに用意されているHTMLをコピペするだけ。
他のスピナーもclassを変えるだけで実装できます。

[html]

[/html]