Spin.js : Animated CSS loader

Spin.js is a simple CSS loader, an animated CSS activity indicator with VML fallback.

– No images, no external CSS
– No dependencies (jQuery is supported, but not required)
– Highly configurable
– Resolution independent
– Uses VML as fallback in old IEs
– Uses @keyframe animations, falling back to setTimeout()
– Works in all major browsers, including IE6
– MIT License

Implementation:

1. First, inlude CSS & jQuery files

1
2
3
4
5
6
<!-- CSS files -->
<link rel="stylesheet" type="text/css" href="spin.css">

<!-- Js Files - Optionnal - You can use Spin.js without jQuery ! -->
<script type='text/javascript' src='jquery.js'></script>  
<script type='text/javascript' src='spin.js'></script>

 

2. jQuery implementation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* No options - simple call */
var spinner = new Spinner().spin();
target.appendChild(spinner.el);

/* More complex call - with options */
var opts = {
  lines: 13,
  length: 7,
  width: 4,
  radius: 10,
  corners: 1,
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

 

 

Use with jQuery

Spin.js does not require jQuery. Anyway, if you use jQuery (or zepto.js) you may use the following plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.fn.spin = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (opts !== false) {
      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
    }
  });
  return this;
};

 

TIPS

Hiding the spinner

To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.

 

Manual positioning

By default the spinner is centered within the target element. Alternatively you may specify a top and left option to position the spinner relative to the target element.
In order to manually insert the spinner into the DOM you can invoke the spin() method without any arguments and use the el property to access the HTML element:<:p>

1
2
var spinner = new Spinner().spin();
target.appendChild(spinner.el);

The returned element is a DIV with position:relative and no height. The center of the spinner is positioned at the top left corner of this DIV.

Options:
lines
Integer
Default : 13 – The number of lines to draw
length
Integer
Default : 7 – The length of each line
width
String
Default : 4 – The line thickness
radius
Integer
Default : 10 – The radius of the inner circle
corners
Integer
Default : 1 – Corner roundness (0..1)
rotate
Integer
Default : 0 – The rotation offset
color
String
Default : “#000” – #rgb or #rrggbb
speed
Integer
Default : 1 – Rounds per second
trail
Integer
Default : 60 – Afterglow percentage
shadow
Boolean
Default : false – Whether to render a shadow
hwaccel
Boolean
Default : false – Whether to use hardware acceleration
className
String
Default : “spinner” – The CSS class to assign to the spinner
zIndex
Integer
Default : 2e9 – The z-index (defaults to 2000000000)
top
String
Default : “auto” – Top position relative to parent in px
left
String
Default : “auto” – Left position relative to parent in px
Methods:
data.spinner.stop();
Function
Returns : null – Removes the UI elements from the DOM and stops the animation
Screenshots
  • Example 1
  • Example 2
  • Example 3
  • Example 4

Leave a Reply