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

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

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

サイトのキャプチャ

CSS Spinners
CSS Spinners -GitHub

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

スピナーが動いてるとこ

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

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

Loading…

スピナーの実装

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

Step 1: 外部ファイル

各スピナーに用意されている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>

Step 2: HTML

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

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

sponsors

top of page

©2018 coliss