https://github.com/kig/spinner

Small HTML5 spinner library
https://github.com/kig/spinner

Last synced: 3 months ago
JSON representation

Small HTML5 spinner library

• Host: GitHub
• URL: https://github.com/kig/spinner
• Owner: kig
• Created: 2011-08-11T14:07:21.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2013-07-17T13:57:08.000Z (over 11 years ago)
• Last Synced: 2024-06-22T22:04:08.669Z (6 months ago)
• Language: JavaScript
• Homepage: http://fhtr.org/spinner
• Size: 160 KB
• Stars: 16
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README

Awesome Lists containing this project

README

        
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:

    

    

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,

    x : String,

    y : String

  );

  // 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):

 

  

    

    

    

      #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;

      }

    

  

  

   


   

    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();