title: Stop Spinner.js
body: <p>I'm using spin.js ( <a href="http://fgnass.github.com/spin.js/" rel="noreferrer">http://fgnass.github.com/spin.js/</a>) while a large full width/height image loads. The problem is I'm having trouble stopping the spinner. The stop() method doesn't seem to work. There's what I've got:</p>
  
  <pre><code>$(document).ready(function($) {
      var img = new Image();
      img.src = $('#top-bg').css('background-image').replace(/url\(|\)/g, '');
  
      img.onload = function(){
          $("#top-bg").spinner.stop();
          $(".top-bar").delay(1500).fadeIn(5000);
          $("#arrow, #arrowrt, #top-icons").delay(5000).fadeIn(5000);
      };
  });
  </code></pre>
  
  <p>I also tried </p>
  
  <pre><code>.spin(false)
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.data('spinner').stop()
  </code></pre>
  
  <p>This is the spinner settings:</p>
  
  <pre><code>$(document).ready(function($) {
      var opts = {
      lines: 9, // The number of lines to draw
      length: 11, // The length of each line
      width: 4, // The line thickness
      radius: 10, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#fff', // #rgb or #rrggbb
      speed: 0.9, // Rounds per second
      trail: 54, // 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('top-bg');
     var spinner = new Spinner(opts).spin(target);
  });
  </code></pre>