bshiroya / spinkit

A collection of loading indicators animated with CSS

SpinKit

Simple loading spinners animated with CSS. See demo. SpinKit uses hardware accelerated (translate and opacity) CSS animations to create smooth and easily customizable animations.

Usage

Regular CSS

Grab the HTML and CSS for a spinner from the example files, or add SpinKit directly to your project with bower:

$ bower install spinkit

or npm:

$ npm install spinkit

SCSS

If you're using SCSS you can include specific spinners (rather than all of them) by importing them one by one:

@import '../bower_components/spinkit/scss/spinners/1-rotating-plane',
        '../bower_components/spinkit/scss/spinners/3-wave';

You currently need to use an autoprefixer if you want to support all browsers. If you're compiling your SCSS with gulp you can use gulp-autoprefixer, and grunt-autoprefixer if you use grunt.

Variables that can be overridden are listed in scss/_variables.scss.

Web browser compatibility

CSS animations are supported in the latest version of all major browsers, and browsers with animation support make up almost 90% of all usage. If you need to support IE9 and below, however, this section is for you.

Implementing a fallback spinner

How do you know if you need to provide a fallback? You can easily check for animation support with Modernizr, or manually check for the animation property, and replace the spinner with a GIF if it's not supported:

function browserSupportsCSSProperty(propertyName) {
  var elm = document.createElement('div');
  propertyName = propertyName.toLowerCase();

  if (elm.style[propertyName] != undefined)
    return true;

  var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1),
    domPrefixes = 'Webkit Moz ms O'.split(' ');

  for (var i = 0; i < domPrefixes.length; i++) {
    if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
      return true;
  }

  return false;
}

Use it to check for animation support:

if (!browserSupportsCSSProperty('animation')) {
  // fallback…
}

Contributing

See CONTRIBUTING.md for details.