SpinKit README

The project's README from github.com/tobiasahlin/SpinKit. As one markdown file: README.md.

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

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 (tobiasahlin/SpinKit)

Searching Database…

19.3K ·GitHub
SpinKit
What is this?SpinKit is a collection of loading spinners animated with pure CSS — a stylesheet you drop into a web project to get smooth loading indicators without JavaScript or images.
Is it a CSS file I include, or just code to copy-paste?Both. You can include spinkit.css or spinkit.min.css, or copy-paste only the code for the spinner you need — spinners have no dependencies on each other, no shared classes and no shared animations.
How do I add a spinner to my page?Install the package via npm or bower (or paste the CSS directly), include spinkit.min.css, then copy-paste the HTML snippet for the spinner you want from examples.html.
Does it need JavaScript or jQuery to run?No. The spinners are plain CSS animated only with transform and opacity, which is what keeps the motion smooth. JavaScript is only useful for detecting browser support to show a fallback.
Will the spinners work in all browsers?Almost everywhere: CSS keyframe animations have about +96.5% global support and CSS variables about +91.8%. For older browsers you can remove the CSS variables, or check animation support with Modernizr and swap in a GIF fallback.
How many spinner styles does SpinKit include?Twelve: Plane, Chase, Bounce, Wave, Pulse, Flow, Swing, Circle, Circle Fade, Grid, Fold and Wander. The demo page shows all of them in action.
How do I change a spinner's size and color?Override the CSS variables: --sk-size sets the spinner's width and height, --sk-color sets its color. By default spinners are 40px with background color #333.
How do I center a spinner on the page?Add the sk-center utility class to the spinner element — it sets margin to auto.
What are similar projects?anime, nprogress, skrollr, snabbdom, animate.css, iCSS, mdb-ui-kit, material-components-web
Which topics is it in?css-animations, loading, lightweight, ui-components, animation, css, html, ui, web-development, npm, frontend, library
Creator
tobiasahlin
Size
0.3 MB
Stars
19.3K
Updated
CommitFeb 10Releasev2.0.1Oct 30
Age
12y
Commits · 90 Days