explaingit

tobiasahlin/spinkit

Analysis updated 2026-06-21

19,370CSSAudience · designerComplexity · 1/5Setup · easy

TLDR

A ready-made collection of pure CSS loading spinners, spinning and pulsing shapes for websites, that require no JavaScript or images and are easy to customize with two CSS variables.

Mindmap

mindmap
  root((repo))
    What It Does
      CSS loading spinners
      No JavaScript needed
      Hardware-accelerated
      Self-contained styles
    Animations Available
      Plane Chase Bounce
      Wave Pulse Flow
      Circle Grid Fold
    Customization
      CSS color variable
      CSS size variable
    Audience
      Web developers
      UI designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a polished loading indicator to a website by copying a few lines of HTML and one CSS file

USE CASE 2

Customize a spinner's color and size by setting two CSS variables without touching animation code

USE CASE 3

Replace a slow GIF loading image with a smooth, hardware-accelerated CSS animation

What is it built with?

CSSHTML

How does it compare?

tobiasahlin/spinkitdhg/skeletonuvdesk/community-skeleton
Stars19,37019,41618,634
LanguageCSSCSSCSS
Setup difficultyeasyeasyhard
Complexity1/51/54/5
Audiencedesignervibe coderpm founder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

In plain English

SpinKit is a collection of animated loading indicators, the spinning or pulsing shapes that appear on a website while content is loading, built entirely with CSS. The problem it solves is that creating smooth, good-looking loading animations from scratch is surprisingly time-consuming, and many developers reach for JavaScript-based solutions or heavy GIF images instead. SpinKit provides a set of ready-made, lightweight animations that require no JavaScript and no images. Each spinner is a small HTML snippet paired with CSS that uses only the "transform" and "opacity" properties to animate, keeping the animations smooth and hardware-accelerated. Available styles include Plane, Chase, Bounce, Wave, Pulse, Flow, Swing, Circle, Grid, Fold, and Wander. You add the CSS file to your project, copy a few lines of HTML, and the spinner appears. Color and size are controlled with CSS variables, specifically --sk-color and --sk-size, making customization straightforward. Spinners are self-contained with no shared classes, so you can copy just the code for the one animation you need. You would use SpinKit any time you are building a website or web app and need a polished loading indicator without the overhead of a full animation library. The tech stack is pure CSS.

Copy-paste prompts

Prompt 1
Show me the SpinKit HTML and CSS I need to add a Chase spinner to my webpage that is 60px wide and blue
Prompt 2
How do I use SpinKit to show a spinner while my React component is fetching data, then hide it when done?
Prompt 3
Which SpinKit animation works best as a button loading state, and give me the code to swap a button label for that spinner on click
Prompt 4
I only want to use the Wave spinner from SpinKit, show me how to copy just that animation's CSS without the full stylesheet

Frequently asked questions

What is spinkit?

A ready-made collection of pure CSS loading spinners, spinning and pulsing shapes for websites, that require no JavaScript or images and are easy to customize with two CSS variables.

What language is spinkit written in?

Mainly CSS. The stack also includes CSS, HTML.

How hard is spinkit to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is spinkit for?

Mainly designer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub tobiasahlin on gitmyhub

Verify against the repo before relying on details.