Guide · Open source

How to use SpinKit: CSS loading spinners in your project

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

SpinKit is an open-source collection of loading indicators (spinners) built with CSS animations, released under the MIT licence. This guide is for front-end developers who want a spinner that shows while something loads without adding JavaScript. By the end you will be able to install SpinKit, paste a spinner into a page, and change its size and color.

SpinKittobiasahlin/SpinKit · ★ 19.3k · MIT Install options & downloads

Quick start

1Install the package. Run npm install spinkit, or use bower install spinkit, in your project folder.
2Include the stylesheet. Add spinkit.min.css to your page, or copy only the CSS for the spinner you need.
3Paste the spinner HTML. Copy the HTML snippet for your chosen spinner, such as sk-plane, from spinkit.css or examples.html into your page.
4Center it if needed. Add the sk-center class to the spinner to set its margin to auto.
5Set size and color. Override --sk-size and --sk-color on the spinner or a parent element.
6Show and hide it. Show the spinner while content loads and remove or hide it once loading finishes. The README does not describe a built-in show/hide method, so this is handled in your own code.

Install SpinKit with npm or bower

Add SpinKit to your project with a package manager. The README lists two options: npm and bower.

Once installed, include spinkit.css or spinkit.min.css in your project. If you only need one spinner, you can instead copy the CSS for that spinner into your own stylesheet, because the spinners share no classes or animations.

$ npm install spinkit

Add a spinner to your page

Copy the HTML for the spinner you want from spinkit.css or examples.html. The README's examples assume you have included spinkit.min.css. Each spinner is a container div with a class such as sk-plane, sk-chase or sk-wave, and some contain child divs for the moving parts.

To center the spinner, add the sk-center utility class to it. This class sets margin to auto.

Available spinners in the README include Plane, Chase, Bounce, Wave, Pulse, Flow, Swing, Circle, Circle Fade, Grid, Fold and Wander.
Example: a single-element spinner uses <div class="sk-plane"></div>.

<div class="sk-plane"></div>

Change the size and color

By default, every spinner has a width and height of 40px and a background-color of #333. You change these by overriding CSS variables. The two main ones are --sk-size, which sets the width and height, and --sk-color, which sets the color.

If you need broader browser support, the README suggests removing the CSS variables and setting the values directly.

--sk-size controls width and height.
--sk-color controls the spinner color.

.my-spinner {
  --sk-size: 60px;
  --sk-color: #0070f3;
}

Check browser support and add a fallback

SpinKit uses CSS keyframes animations and CSS variables. The README gives global support figures of over 96% for keyframes animations and over 91% for CSS variables, so some older browsers may not show the animation.

If you need a fallback, you can check for animation support with Modernizr or with a small JavaScript function that looks for the animation property. If support is missing, the README suggests replacing the spinner with a GIF.

if (!browserSupportsCSSProperty('animation')) {
  // fallback…
}

What people use it for

Showing a spinner while a section of a page fetches data, without loading a JavaScript library.
Copying one spinner's CSS and HTML into a project that has no package manager.
Adding a lightweight loading indicator to a site where page weight matters.
Testing different spinner styles from examples.html before picking one.

Frequently asked questions

Is SpinKit free to use?

SpinKit is released under the MIT licence, as stated in the project's README and listing. The MIT licence generally allows use, modification and redistribution, but check the LICENSE file in the repository for the exact terms.

Does SpinKit require JavaScript?

No. SpinKit is built entirely with CSS animations, and the README describes adding a stylesheet and pasting HTML. The only JavaScript in the README is an optional example for detecting animation support.

How do I install SpinKit?

Run npm install spinkit or bower install spinkit in your project. Then include spinkit.css or spinkit.min.css, or copy the CSS for a single spinner.

Which browsers does SpinKit support?

The README says SpinKit uses CSS keyframes animations and CSS variables, which it gives as over 96% and over 91% global support. It notes that older browsers may need a fallback, such as a GIF.

Can I change the spinner size and color?

Yes. Override the --sk-size variable for width and height, and --sk-color for color. The defaults are 40px and #333.

What are the alternatives to SpinKit?

The listing names loading.io, the nprogress library and CSS-Loaders collections as comparable projects. Choose based on whether you need a single spinner style or a progress bar.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

SpinKit suits front-end developers who want a small, dependency-free CSS spinner they can copy into a project without JavaScript. It is less suitable if you must support very old browsers without a fallback, or if you need an actively maintained library, since the listing notes the last push was in August 2020.

Install options & downloads