スピナーを簡単に実装できるJSライブラリ

今回は簡単にスピナーを実装できるspin.jsをご紹介します。
なんと準備するものはspin.jsのJSファイル一つのみ！CSSもjQueryも必要ありません！
spin.js

そもそもスピナーってなんすか
1. spin.jsのメリット
spin.jsの使い方
1. 応用 -画面中央に表示したい！

そもそもスピナーってなんすか

スピナーとはロード中にぐるぐる回るアレのことです。
読み込んでいる最中にユーザのストレスを軽減する事ができると言われています。
主にAjaxでの通信中に使用したりすることが多いと思います。

spin.jsのメリット

数あるスピナーのライブラリからspin.jsを推す理由は以下の4点です。

使用するのはjsファイルだけ
jQuery等の外部ライブラリが不要
とても軽量
CSSを汚さない

個人的に一番大きいのはjsの1ファイルのみ読みこめば使用できるという点。
jQueryライブラリなどでよくあるのが付属のCSSファイルを読み込むというもの。
ライブラリを多用しているとライブラリ用CSSファイルが多くなり管理しづらくなります。
ですが、今回のspin.jsにはそんな心配がありません。

spin.jsの使い方

使い方は簡単。
オプションを設定してからspinnerオブジェクトを生成し、spin()で実行。
スピナーを止めたい時は再度spin()を呼び出します。

//設定
var opts = {
  lines: 13, //線の数
  length: 33, //線の長さ
  width: 11, //線の幅
  radius: 16, //スピナーの内側の広さ
  corners: 1, //角の丸み
  rotate: 74, //向き(あんまり意味が無い・・)
  direction: 1, //1：時計回り -1：反時計回り
  color: '#000', // 色
  speed: 1.5, // 一秒間に回転する回数
  trail: 71, //残像の長さ
  shadow: true, // 影
  hwaccel: true, // ？
  className: 'spinner', // クラス名
  zIndex: 2e9, // Z-index
  top: '50%', // relative TOP
  left: '30%', // relative LEFT
  opacity: .25, //透明度
  fps: 20 //fps
};
//描画先の親要素
var spin_target = document.getElementById('spin-area');
//スピナーオブジェクト
var spinner = new Spinner(opts);
//スピナー描画
spinner.spin(spin_target);
//もう一度spinを呼ぶとスピナー停止
spinner.spin();
//これでも止まります
//spinner.stop();

サンプルはこちら
spin.jsが簡単便利だから使ってみた

応用 -画面中央に表示したい！

spin.jsは親要素からrelativeで位置をしていして表示しますが、
常に画面の中心に表示したい！という時は以下のCSSを適用します。

div.spinner {
  position: fixed !important;
}

また、importantなんか使いたくない！という時はjsを直接いじります。
下記の部分を検索して探してください(適当)
absoluteの部分をfixedに変更すれば実現できます。

n = {lines: 12,length: 7,width: 5,radius: 10,rotate: 0,corners: 1,color: "#000",direction: 1,speed: 1,trail: 100,opacity: .25,fps: 20,zIndex: 2e9,className: "spinner",top: "50%",left: "50%",position: "absolute"};//fixedに変更

以上、簡単にスピナーを実装できるspin.jsのご紹介でした。