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.

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:

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.

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?

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.

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

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!

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.

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.

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

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

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.

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

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.

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:

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.