Need help with SpinKit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

tobiasahlin
17.7K Stars 1.7K Forks MIT License 262 Commits 9 Opened issues

Description

A collection of loading indicators animated with CSS

Services available

!
?

Need anything else?

Contributors list

SpinKit

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

Chase

Bounce

Wave

Pulse

Flow

Swing

Circle

Circle Fade

Grid

Fold

Wander

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…
}

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.