A collection of loading indicators animated with CSS

Overview

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

<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…
}
Comments
  • starting point for scss or sass

    starting point for scss or sass

    First of all this spinner kit is awesome and I want to thank you very much.

    This is a subset of spinners that I have combined into a single scss file which has been tested and is in full use at my company. This is intended as a starting file to work towards so that the css can be compiled down to a dist/spin-kit.css as the end goal.

    Therefore, this is not meant to be a finished peace but is intended as a starting point as a discussion on how you want to proceed. I am fully open to adding a build framework to compile this scss down for you so it can be in separate encapsulated files like wave.scss, and three-bounce.scss. Personally I would favor npm/Grunt or Rails but it is up to you.

    I'd love to help contribute.

    opened by nmccready 11
  • Conflict with Animate.css plugin

    Conflict with Animate.css plugin

    Hi, I just stumbled upon a conflict using Animate CSS “plugin" (https://daneden.github.io/animate.css/), looks like they have keyframes called as well "bounce". Maybe it would be better if spinKit keyframes have a specfic prefix like "spinKitBounce", it would avoid such conflicts as "bounce" is pretty common for CSS animation name... Thank you anyway for this great work :+1:

    opened by dfabreguette 9
  • Create a WordPress Like Pure CSS loader or Spinner

    Create a WordPress Like Pure CSS loader or Spinner

    Hello,

    I am a big fan of WordPress and I like their new loader they use, but only if it wasn't in GIF format. So, I've created this loader/spinner to mimic the WordPress loader.

    I'd like to add this to your wonderful SpinKit.

    Thanks.

    opened by ahmadhania 7
  • Register to NPM

    Register to NPM

    Would be nice to be able to npm install -D spinkit like with Bower. I could publish it myself, but perhaps it would look better if we had an official npm account for SpinKit?

    opened by jacobsvante 6
  • Site is disabled

    Site is disabled

    Website doesn't work!

    Site temporarily disabled

    This page has been temporarily disabled due to a misconfigured custom domain.

    Are you the site owner? Follow the instructions for setting up a custom domain with GitHub pages to update your site's DNS records to point to the proper IP address.

    You can find more information in our GitHub Pages legacy IP deprecation blog post. If you have any questions, please contact support.

    critical 
    opened by beldar 6
  • Circle Spinner not animating in Windows Webkit browsers

    Circle Spinner not animating in Windows Webkit browsers

    Hi! Nice work here! :+1: + :sparkling_heart:

    When trying the Circle Spinner in Safari 5.1.7 or Chrome 24 on Win, I cannot see any animation :cry: On Firefox 29 it works well.

    Any thoughts :question:

    Fritz

    opened by FritzTheBlitz 6
  • a sliding block

    a sliding block

    I am very interested in this project, and this is my first attempt at trying to make one.

    A block sliding in a box, maybe it looks ugly, but I like it !

    Thanks for the project, great resource!

    opened by zhanglun 6
  • New bounce animation & gulpfile regex fix

    New bounce animation & gulpfile regex fix

    Added a new animation (sort of a variant of 7, but bouncing upward rather than growing/shrinking). The gulpfile regex was not working as period (.) was not matching whitespace, so I have fixed this as well.

    opened by chris--jones 5
  • Demo different than the examples.

    Demo different than the examples.

    Why are the spinners on the demo site vastly different than the examples. In particular the circle spinner on the demo has fewer dots in the spinner and the source is very different than the code in the examples/8-circle.html. And the css for the circle spinner on the demo page is not spinkit.css file. Can the example files be updated to include the exact spinners on the demo page?

    Thanks.

    opened by KatelynL 5
  • New animation:

    New animation: "Unfolding"

    I love your style so I'm thinking of a little commission.

    The three bounce is perfect for route transitions, but there are moments in certain views where a component is only fully constructed on demand. Suppose it takes a few seconds, up to six in my case, to build the component; I would like to overlay a spinner that conveys the work of "unboxing" (which the user prefers over "construction" in data entry apps).

    The animation would begin with a plain square that unfolds from the centre into a diamond, which then unfolds from the centre into a square. If possible the shape would continuously shrink, and the shape would always be the same size, but if that's too difficult then the larger diamond could scale down before unfolding, and the larger square could scale down before the animation repeated. A simpler version of all this is to simply rotate the diamond back to the square and repeat, but I think the full version is more compelling.

    This (or something like it) would make a nice addition to the SpinKit collection :D

    unboxing

    request 
    opened by macu 5
  • Spinning square animation bug

    Spinning square animation bug

    Just go the next slide (circle) and go back to previous one (square).

    You'll see that the square is not animating anymore. But if you inspect the item you'll see that the div is "rotating" but not repainting.

    A bug?

    Tested on Chrome 38.0.2125.122 (Build 290379) m 64bit

    bug 
    opened by julianxhokaxhiu 4
  • Added a new Bouncing ball animation

    Added a new Bouncing ball animation

    Changed the Spinkit.css. Didn't delete anything and just added 3 classes and stylings for the new animation.

    Why

    It provides a new and different feel. It provides variety.

    opened by yummyweb 0
  • Old Browser-Support

    Old Browser-Support

    With v2 you use Custom Properties (CSS Variables) to set the size and the color. Using Custom Properties does not work with old browsers (e.g. IE11). Please support old Browser by defining a default value - something like this:

    /* Config */
    :root {
      --sk-size: 40px;
      --sk-color: #333;
    }
    
    /*  Plane */
    .sk-plane {
      width: 40px;
      height: 40px;
      background-color: #333;
      width: var(--sk-size);
      height: var(--sk-size);
      background-color: var(--sk-color);
      animation: sk-plane 1.2s infinite ease-in-out; 
    }
    

    The IE11 will ignore the lines where the the Custom Field is set and uses the predefined values. Using var(value, default-value); does not work.

    An easy way to prevent repetitions is using SCSS and the SCSS variables (see: #150):

    $sk-size: 40px !default;
    $sk-color: #333 !default;
    
    /* Config */
    :root {
      --sk-size: $sk-size;
      --sk-color: $sk-color;
    }
    
    /*  Plane */
    .sk-plane {
      width:$sk-size;
      height: $sk-size;
      background-color: $sk-color;
      width: var(--sk-size);
      height: var(--sk-size);
      background-color: var(--sk-color);
      animation: sk-plane 1.2s infinite ease-in-out; 
    }
    
    opened by riede 1
  • Reintroduce SCSS and modular structure

    Reintroduce SCSS and modular structure

    With v2 you removed SCSS support. Now, only one big file with all spinner exists. But I only want to import the Pulse Spinner and the Three Bounce Spinner. This is currently not possible.

    Please reintroduce SCSS and the modular structure (with SCSS variables), so it is possible only to import the necessary spinner.

    opened by riede 1
  • Add New

    Add New "Shards" Spinner

    I have been reading your css animation tutorials for the past couple days and wanted to add my own spinner to your amazing work.

    This is the spinner in action: sk-shards

    opened by kartikcho 1
  • Add CSS minification script

    Add CSS minification script

    I implemented a minimalistic solution using PostCSS and cssnano to ease the minification of the spinkit.css file.

    The benefit of having this is that in case more people start contributing to the project, it can be made sure that CSS is:

    • minified
    • and minified properly, consistently.

    Minification can be ran using npm run build.

    opened by wolfika 0
Releases(v2.0.1)
  • v2.0.1(Oct 30, 2019)

  • v2.0.0(Oct 28, 2019)

    • New: Added examples.html, with an overview of all spinners
    • New: Added a brand new chase spinner
    • New: Added spinkit.min.css
    • Fixed: inline-block is no longed used to position any spinners (decoupling spacing from any potential font effects).
    • Changed: Most spinners now have more distinct and shorter names.
    • Changed: No positioning is now applied by default on any of the spinners.
    • Changed: All elements now only have one single class.
    • Changed: No more dependencies. gulp, npm, node, etc. is not required to build this project. There's nothing to build.
    • Changed: No more SCSS. All configuration is now done through CSS vars.
    • Fixed: All keyframe animations are now named after the elements/classes that are using them.
    Source code(tar.gz)
    Source code(zip)
  • 1.2.5(Nov 23, 2015)

  • 1.2.4(Nov 23, 2015)

  • 1.2.3(Nov 18, 2015)

  • 1.2.2(Aug 31, 2015)

  • 1.2.1(Jul 26, 2015)

  • 1.2.0(Jul 20, 2015)

  • 1.1.0(Jul 20, 2015)

    This release changes a lot of SCSS and .classes, and may break your current usage of SpinKit. Take caution when upgrading. See https://github.com/tobiasahlin/SpinKit/pull/85 and https://github.com/tobiasahlin/SpinKit/pull/86 for more details.

    • Consistent with demo https://github.com/tobiasahlin/SpinKit/pull/86
    • SCSS polish https://github.com/tobiasahlin/SpinKit/pull/85
    • Remove wordpress spinner https://github.com/tobiasahlin/SpinKit/pull/84
    • Remove moot version property from bower.json https://github.com/tobiasahlin/SpinKit/pull/82
    Source code(tar.gz)
    Source code(zip)
Owner
Tobias Ahlin
I love to build and design things, especially for this site. Old-time @spotify, @Mojang.
Tobias Ahlin
Buttons with built-in loading indicators.

Ladda Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. Check out the demo page. Installation npm in

Hakim El Hattab 7.9k Nov 26, 2022
A collection of loading spinners animated with CSS

Single Element CSS Spinners This is a collection of loading spinners animated with CSS. Each spinner consists of a single div with a class of loader a

Luke Haas 7k Nov 29, 2022
Buttons with built-in loading indicators.

Ladda Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. Check out the demo page. Installation npm in

Hakim El Hattab 7.9k Nov 26, 2022
Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

???????? Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J

Adel N Al-Awdy 5 Sep 11, 2022
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 722 Oct 29, 2022
Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Zach Saucier 96 Sep 29, 2022
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 722 Oct 29, 2022
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig

Maximilian Franzke 569 Nov 24, 2022
Technical indicators (TALib) written in typescript for deno.

description cover coverY Technical Analysis written in Typescript for Deno .gitbook/assets/dylan-calluy-JpflvzEl5cg-unsplash.jpeg 0 ?? deno-talib Inst

nenjo tsu 5 Aug 25, 2022
Check the strength of your password simply and quickly, and with optional UI indicators

Check the strength of your password simply and quickly, and with optional UI indicators. Lock Steel is lightweight, has no dependencies and is connected with the UI elements. Just pure CSS and VanillaJS.

Keenlabi 1 Sep 15, 2022
Collection of Animated 60 FPS TabBar Component's based on React Navigation.

React Navigation TabBar Collection Collection of Animated 60 FPS TabBar Components based on React Navigation. Features 60 FPS Animation Beautiful TabB

Mikalyh 20 Nov 15, 2022
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Nov 27, 2022
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)

cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo

Tunghsiao Liu 54 Nov 14, 2022
Pure CSS animated 3D Super Mario Icon

Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event

Andreas Jacob 14 Apr 15, 2021
This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's cursor functionality.

animatedWebCursors.js This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's

alienmelon 31 Jun 22, 2022
CSS loading animations with minimal effort!

Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ?? ). It started as a drop in CSS file to get

Jhey Tompkins 1.4k Nov 22, 2022
🔮 CSS loading animations made by single element.

Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only

Zongbin 1.2k Nov 23, 2022
Pure css cross-browser loading animations.

[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can

Anas Tawfik 21 Nov 15, 2021