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

spin.js javascript
spinner

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

スポンサーリンク

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

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

spin.jsのメリット

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

  1. 使用するのはjsファイルだけ
  2. jQuery等の外部ライブラリが不要
  3. とても軽量
  4. 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のご紹介でした。

javascript
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人

スパイスファクトリー株式会社 Webエンジニア。フロントエンドやWebサイトの高速化が得意です。インフラ・バックエンドも一通りやってます。
個人的なお仕事のご依頼や情報交換などはお問い合わせまたはTwitterにメンションをお願いします。

ShoheiTaiをフォローする
このエントリーが役に立ったらシェアをお願いします!
イケてないコード – Webエンジニアのブログ

コメント

  1. 匿名 より:

    Uncaught ReferenceError: Spinner is not defined

    使えませんでしたよ。簡単ではありませんでしたね。

タイトルとURLをコピーしました