A collection of loading indicators animated with CSS

Related tags

Animation SpinKit
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 💕 Design engineering at @github. Old-time @spotify, @Mojang.
Tobias Ahlin
Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Connor Atherton 10.2k Jan 2, 2023
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Jimmy Aumard 25 Apr 16, 2021
Shimmer loading - A Flutter project to show how to add shimmer loading animation

shimmer_loading A Flutter project to show how to add shimmer loading animation.

null 0 Feb 6, 2022
A collection of awesome loading animations

NVActivityIndicatorView ⚠️ Check out LoaderUI (ready to use with Swift Package Mananger supported) for SwiftUI implementation of this. ?? Introduction

Vinh Nguyen 10.3k Jan 3, 2023
A collection of awesome flutter loading animation

loading_indicator_view A collection of awesome flutter loading animation Demo Usage loading_indicator_view: ^1.1.0 Animation types Type Type Type Typ

Vans Z 84 Dec 6, 2022
Flutter Smooth PageView indicators

smooth_page_indicator Customizable animated page indicator with a set of built-in effects. infinite Loop support [new] Scrolling dots effect Effects E

Milad akarie 859 Jan 5, 2023
Add an indicator for a progression. You can customize indicators (shape, color, ..)

dots_indicator Widget to display dots indicator to show a position (for a PageView for example). Installation You just need to add dots_indicator as a

Jean-Charles Moussé 139 Dec 1, 2022
Flutter-animated-ui-space-app - ⚡Animated UI Space App Challenge Part 5 🐱‍👤🐱‍👤

Flutter-animated-ui-space-app ?? ?? Project img : Image Challenge Code Image Note !! : Please include your photos to show and install simple_animation

Hmida 7 Sep 15, 2022
Simple to use yet powerfull style widgets with syntax inspired by CSS.

Division Simple to use yet powerfull style widgets with syntax inspired by CSS. Please check out styled_widget which is a replacement of Division! The

Rein Gundersen Bentdal 266 Nov 20, 2022
Animation package for Flutter, inspired by Animate.css

animator Enables you to create stunning flutter animations, faster, efficient and with less code. Null safety: For null safety please use flutter_anim

Sjoerd van Den Berg 136 Dec 6, 2022
Loading Animation With Flutter

Flutter Loading Animation loading.ista.mp4 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few re

Join Flutter 17 Oct 13, 2022
Lazy Loading Flutter Plugin

flutter_placeholder_textlines A simple plugin to generate placeholder lines that emulates text in a UI, useful for displaying placeholder content whil

Victor HG 21 Apr 12, 2022
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Flutter EasyLoading English | 简体中文 Live Preview ?? https://nslog11.github.io/flutter_easyloading Installing Add this to your package's pubspec.yaml fi

nslog11 1k Jan 9, 2023
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Andre Cytryn 171 Sep 23, 2022
Help you to build pull-down refresh and pull-up loading in the simplest way.

frefresh Help you to build pull-down refresh and pull-up loading in the simplest way. Although unprecedented simplicity, but the effect is amazing. It

Fliggy Mobile 427 Nov 26, 2022
A Flutter library for loading skeletons

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Daniel 0 Jan 6, 2022
Android loading animations

Android-SpinKit Android loading animations(I wrote a android edition according SpinKit) Demo Apk Preview Gradle Dependency dependencies { implement

ybq 8.4k Dec 30, 2022
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

null 3 Dec 8, 2021
A simple custom loading indicator package.

custom_loading_indicator A Flutter package to customise the loading indicators with your organisation's logo. Let's say you're a dentist and your app

Harshad Manglani 3 Aug 10, 2020