Cool な、Spin.js

プログレスのインジケータとして、GIF画像を用意しないで済ませてしまう Cool JavaScript がある。

http://fgnass.github.io/spin.js/

デモに書いてあるように、

<body>
<div id="spin"></div>

というHTMLに対して、、

$(function(){
  var spinner = new Spinner().spin();
  $('#spin').append(spinner.el);
}

と、何のオプション指定なしで実行すると、

f:id:posturan:20160313192745j:plain



となってしまうので、スタイルシートとして、
  margin: 24px 0px 0px 16px;
を指定すると、

f:id:posturan:20160313192740j:plain



はみ出ずに済む。これくらいの調整が必要と覚えておくと良いだろう。

ボタン押下でもテストできるが、ページを読み終わった時などに、
remove を実行すれば消える。

   $('#spin_remove').click(function(){
      $('#spin').remove();
   });

あるいは、親要素から、remove() でなくて、stop() の実行

spinner.stop(); で良い