SpinKit

Simple loading spinners animated with CSS. Seedemo.SpinKit only uses (transformandopacity) CSS animations to create smooth and easily customizable animations.

Usage

• Addspinkit.cssorspinkit.min.cssto your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)
• Add a spinner to your project by copy-pasting HTML fromspinkit.cssorexamples.html
• Add thesk-centerutility class to the spinner to center it (it setsmargintoauto)
• By default, thewidthandheightof all spinners are set to40px.background-coloris set to#333.
• Configure the spinner by overwriting the CSS variables, primarily--sk-size(spinner width & height) and--sk-color(spinner color). If you need broader browser support, remove the CSS variables.

You can include SpinKit to your project withbower:

$ bower install spinkit

or npm:

$ npm install spinkit

Spinners

Given that you have includedspinkit.min.cssin your project, these snippets will produce the different spinners:

Plane

<divclass= "sk-plane"></div>

Chase

<divclass= "sk-chase">
<divclass= "sk-chase-dot"></div>
<divclass= "sk-chase-dot"></div>
<divclass= "sk-chase-dot"></div>
<divclass= "sk-chase-dot"></div>
<divclass= "sk-chase-dot"></div>
<divclass= "sk-chase-dot"></div>
</div>

Bounce

<divclass= "sk-bounce">
<divclass= "sk-bounce-dot"></div>
<divclass= "sk-bounce-dot"></div>
</div>

Wave

<divclass= "sk-wave">
<divclass= "sk-wave-rect"></div>
<divclass= "sk-wave-rect"></div>
<divclass= "sk-wave-rect"></div>
<divclass= "sk-wave-rect"></div>
<divclass= "sk-wave-rect"></div>
</div>

Pulse

<divclass= "sk-pulse"></div>

Flow

<divclass= "sk-flow">
<divclass= "sk-flow-dot"></div>
<divclass= "sk-flow-dot"></div>
<divclass= "sk-flow-dot"></div>
</div>

Swing

<divclass= "sk-swing">
<divclass= "sk-swing-dot"></div>
<divclass= "sk-swing-dot"></div>
</div>

Circle

<divclass= "sk-circle">
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
<divclass= "sk-circle-dot"></div>
</div>

Circle Fade

<divclass= "sk-circle-fade">
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
<divclass= "sk-circle-fade-dot"></div>
</div>

Grid

<divclass= "sk-grid">
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
<divclass= "sk-grid-cube"></div>
</div>

Fold

<divclass= "sk-fold">
<divclass= "sk-fold-cube"></div>
<divclass= "sk-fold-cube"></div>
<divclass= "sk-fold-cube"></div>
<divclass= "sk-fold-cube"></div>
</div>

Wander

<divclass= "sk-wander">
<divclass= "sk-wander-cube"></div>
<divclass= "sk-wander-cube"></div>
<divclass= "sk-wander-cube"></div>
</div>

Web browser compatibility

SpinKit uses CSS animations and variables:

• CSS keyframes animationsare at +96.5% global support
• CSS variablesare at +91.8% global support

Implementing a fallback spinner

How do you know if you need to provide a fallback? You can check for animation support withModernizr,or manually check for theanimationproperty, 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 foranimationsupport:

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