Skip to content
Get packs

SpinKit

A set of CSS-only animated loading spinners you can copy into a web page.

GitHub Download v2.0.1
Stars
19.3k
Forks
1.8k
Licence
MIT
Language
CSS
Last update
6.3 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

SpinKit is a collection of loading indicators (spinners) built entirely with CSS animations. You add a small stylesheet to a web project, then paste in a short HTML snippet to show a spinner while something loads. It uses only transform and opacity animations and lets you change size and color through CSS variables.

  • Show a spinner in a page while data loads from an API
  • Pick one spinner style such as Plane or Wave and copy its HTML and CSS
  • Center a spinner on the page with the sk-center utility class
  • Change spinner size and color by overriding --sk-size and --sk-color

Great for

  • Front-end developers who need a quick loading indicator without adding JavaScript
  • Developers who want to copy a single spinner's CSS and HTML into their own project
  • Sites where a lightweight, dependency-free spinner is preferred

Not ideal for

  • Projects that need spinners to support very old browsers, since the README says CSS variables and animations may need a fallback
  • Teams looking for a maintained, actively developed library, since the last push was in August 2020
Step-by-step guide: how to use SpinKitInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    Install with npm

    npm install spinkit

    Install with bower

    bower install spinkit
  2. 2

    Run it

    • Install the package or copy spinkit.min.css into your project
    • Link the stylesheet in your HTML page
    • Copy a spinner's HTML snippet, such as <div class="sk-plane"></div>, into your page
    • Optionally override --sk-size and --sk-color to change size and color
  3. 3

    Get the most out of it

    • Use the sk-center utility class to center a spinner horizontally
    • Override the --sk-size and --sk-color CSS variables to match your design
    • Copy only the CSS for the spinner you need to keep your bundle small
    • Check the README's JavaScript snippet to detect animation support and show a GIF fallback in older browsers

Downloads

Source code (.zip)master branch · straight from GitHubRelease v2.0.1Release notes and sourceOfficial website & docstobiasahlin.com/spinkit/

Strengths

  • Animations use only transform and opacity, which the README says keeps them smooth
  • No JavaScript or shared dependencies between spinners, so you can copy just the one you need
  • Customizable through CSS variables such as --sk-size and --sk-color

Trade-offs

  • Last code push was 2020-08-01, so it may not receive updates
  • Browser support depends on CSS animations and variables; the README includes a JavaScript fallback check for older browsers

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.