Github url

SpinKit

by tobiasahlin

tobiasahlin /SpinKit

A collection of loading indicators animated with CSS

17.2K Stars 1.6K Forks Last release: 9 months ago (v2.0.1) MIT License 262 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.