Simple loading spinners animated with CSS. See demo. SpinKit uses hardware accelerated (translate and opacity) CSS animations to create smooth and easily customizable animations.
Grab the HTML and CSS for a spinner from the example files, or add SpinKit directly to your project with bower:
$ bower install spinkitor npm:
$ npm install spinkitIf 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.
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.
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:
functionbrowserSupportsCSSProperty(propertyName){varelm=document.createElement('div');propertyName=propertyName.toLowerCase();if(elm.style[propertyName]!=undefined)returntrue;varpropertyNameCapital=propertyName.charAt(0).toUpperCase()+propertyName.substr(1),domPrefixes='Webkit Moz ms O'.split(' ');for(vari=0;i<domPrefixes.length;i++){if(elm.style[domPrefixes[i]+propertyNameCapital]!=undefined)returntrue;}returnfalse;}Use it to check for animation support:
if(!browserSupportsCSSProperty('animation')){// fallback…}See CONTRIBUTING.md for details.