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

Post on:2015年5月19日

sponsors

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

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

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

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

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

Loading…

スピナーの実装

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

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

<head>
  ...
  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/ball.css" type="text/css">
</head>

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

<head>
  ...
  <link rel="stylesheet" href="http://css-spinners.com/css/spinners.css" type="text/css">
</head>

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

<div class="ball-loader">
  Loading…
</div>