Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.
Usage
- Add
spinkit.css or spinkit.min.css to 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 from
spinkit.css or examples.html
- Add the
sk-center utility class to the spinner to center it (it sets margin to auto)
- By default, the
width and height of all spinners are set to 40px. background-color is 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 with bower:
$ bower install spinkit
or npm:
$ npm install spinkit
Spinners
Given that you have included spinkit.min.css in your project, these snippets will produce the different spinners:
Plane
<div class="sk-plane"></div>
Chase
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
Bounce
<div class="sk-bounce">
<div class="sk-bounce-dot"></div>
<div class="sk-bounce-dot"></div>
</div>
Wave
<div class="sk-wave">
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
</div>
Pulse
<div class="sk-pulse"></div>
Flow
<div class="sk-flow">
<div class="sk-flow-dot"></div>
<div class="sk-flow-dot"></div>
<div class="sk-flow-dot"></div>
</div>
Swing
<div class="sk-swing">
<div class="sk-swing-dot"></div>
<div class="sk-swing-dot"></div>
</div>
Circle
<div class="sk-circle">
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
</div>
Circle Fade
<div class="sk-circle-fade">
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
</div>
Grid
<div class="sk-grid">
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
</div>
Fold
<div class="sk-fold">
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
</div>
Wander
<div class="sk-wander">
<div class="sk-wander-cube"></div>
<div class="sk-wander-cube"></div>
<div class="sk-wander-cube"></div>
</div>
Web browser compatibility
SpinKit uses CSS animations and variables:
Implementing a fallback spinner
How do you know if you need to provide a fallback? You can 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…
}
SpinKit 是一组用纯 CSS 实现动画效果的加载指示器（loading spinner）——只要把这份样式表放进网页项目，不需要 JavaScript 或图片，就能得到流畅的加载动画。