spinner: A JavaScript repository from rbecheras

Spinner is a small HTML5 loading spinner library. 

Spinner uses CSS transitions and animations to 
animate the spinner and canvas to draw the spinner
graphic.

To use spinner on your page you need to add the
spinner stylesheet and JS file to your page:

    <link rel="stylesheet" href="spinner.css" type="text/css">
    <script type="text/javascript" src="spinner.js"></script>

The spinner library adds an object named Spinner to the global
namespace. Here's the Spinner API:

  // Create a new Spinner and append it to the container element.
  // The spinner graphic is drawn in the specified color.
  // The spinner element's center is absolute-positioned at the given
  // coordinates. The spinner has negative margin-left and margin-top
  // to center the spinner at the coordinates.
  var s = new Spinner(
    container : HTMLElement,
    color : String<CSSColor>,
    x : String<CSSCoordinate>,
    y : String<CSSCoordinate>
  );

  // Show the spinner after 17 ms.
  // Hack to get around transitions not firing on newly appended elements.
  s.start();

 // Shows spinner by setting spinner element's className to spinner-bringIn.
  s.show();

 // Hides spinner by setting spinner element's className to spinner-bringOut.
  s.hide();
  
  // Set callback function to call after spinner is completely visible.
  s.onshow = function() {}; 

  // Set callback function to call after spinner is completely hidden.
  s.onhide = function() {};


After you have added the spinner files to your
page, you can use the library. Here's a small example
that implements a slideshow with the spinner (examples/simple.html):

 <html>
  <head>
    <link rel="stylesheet" href="spinner.css" type="text/css">
    <script type="text/javascript" src="spinner.js"></script>
    <style type='text/css'>
      #my-container {
        position: relative;
        width: 240px;
        height: 320px;
      }
      #my-container img {
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        opacity: 0;
      }
    </style>
  </head>
  <body>
   <div id='my-container'></div>
   <script>
    var container = document.getElementById('my-container');
    var spinnerColor = 'black';
    var x = '50%';
    var y = '50%';
    
    var spinner = new Spinner(container, spinnerColor, x, y);
    var img = new Image();
    container.appendChild(img);

    var images = ['polaroids/4.jpg', 'polaroids/2.jpg', 'polaroids/3.jpg'];
        
    // Fade out the spinner when the image has loaded.
    img.onload = function() {
      spinner.hide();
    };
    
    // Hide image and show spinner when you click on the image.
    // The spinner onshow handler loads the next image.
    img.onclick = function() {
      img.style.opacity = 0;
      spinner.show();
    };
    
    // Show image when the spinner has faded out.
    spinner.onhide = function() {
      img.style.opacity = 1;
    };
    
    // Go to the next image when the spinner has faded in.
    var i = 0;
    spinner.onshow = function() {
      img.src = images[i];
      i = (i + 1) % images.length;
    };

    // start up the spinner
    spinner.start();
   </script>
  </body>
 </html>
rbecheras/spinner
