Spin.js：「ロード中．．．」のアイコンを生成するJSライブラリのサンプル

teachers

Spin.js：「ローディング中．．．」のアイコンを生成するJSライブラリのサンプル

spin.js
↑こういうやつです。よく見ますよね。
最近だと非同期で読みこみを行うようなサイトが増えてきましたので、見る機会が増えているのですね。
こういった画像を「ローディング画像」とか「ローディングインジケータ」と言ったりします。

ローディング画像を実装する方法はいくつかありますが、
今回は「Spin.js」というJSライブラリを用いて実装する方法をご紹介しようと思います。

まずは本家サイトをチェックです↓
spinjs

Spin.js

特徴

spin.jsの特徴として、下記のようなものがあるようです(誤訳あったらすいません)

・画像やCSS不要！(No images, no external CSS)
・jQuery等の他のソースに依存しない！(No dependencies (jQuery is supported, but not required))
・設定項目が豊富！(Highly configurable)
・解像度に依存しない！(Resolution independent)
・古いバージョンのIEにも対応！(Uses VML as fallback in old IEs)
・setTimeout代替でキーフレームアニメーションも使用可！(Uses @keyframe animations,falling back to setTimeout())
・メジャーブラウザで動作する！(Works in all major browsers, including IE6)
・MITライセンス！(MIT License)

個人的には、加えてソースが軽量である点もよい特徴の１つだと思いました。

サンプル作成

それではサンプルを作成してみましょう。

まずは先ほどの本家サイトから「spin.min.js」をダウンロードします。
「spin.js」でも構いません。ソースをしっかり解析したい場合には、「spin.js」がよいでしょう。
「spin.min.js」は改行や空白がごっそり削除されているので、ソースは読みづらいですが軽量です。
そして、自分のWebサーバの任意の場所にアップロードしましょう。

読みこむページ(HTML)に、下記のように記述して、spin.min.jsを読み込みます。

<script type="text/javascript" src="～～～/spin.min.js"></script>

「～～～」はJSファイルまでのディレクトリパスです。

さらに、次のように記述します。

<script type="text/javascrript">
var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
</script>
<div id="foo"></div>

記述できたらブラウザからHTMLを表示してみましょう。
本記事のトップにあるようなローディング画像が表示されるのではないかと思います。

ここまでできたら、さらに記述したオプション内容を色々いじってみましょう。
例えば、
「lines」オプションをいじれば、ローディングバーの数が増えたり減ったりします。
「length」オプションをいじれば、バーの長さが変化します。
「width」オプションをいじれば、バーの太さが変化します。
・・・という感じでいろいろ試してみてください。

色々なパターンができたでしょうか。
それでは、画像が読み込み完了するまでローディング表示させるにはどうすればよいでしょうか。
javascriptに次のような記述を追加すると、表示させることができます。

var myDate = new Date();
nNoCache = myDate.getTime();
var myImg = new Image();
myImg.src = "～～～/sample.jpg?" + nNoCache;
myImg.onload = function (){
  spinner.stop();
}

１，２行目はキャッシュされた画像だとロードされているのがわからなくなってしまいますので、その対策です。
実際はなくてもかまいません。（４行目も「 + nNoCache」は不要ですね）。
画像は何かしらアップロードして確認してみてください。
なるべく大きめの画像にするとローディング時間が長くなるのでわかりやすいでしょう。