Home/CSS Loaders/SpinKit
S

SpinKit

Updated: Sep 12, 2026

Pure CSS loading spinners you can copy, paste, and customize — no JavaScript, no images, no dependencies

SpinKit
1 / 2

About SpinKit

Overview

SpinKit is a collection of CSS loading spinners created by Tobias Ahlin. It provides pre-built, animated spinners that developers can drop into any web project. The tool solves the common need for simple, lightweight loading indicators without requiring JavaScript or image assets.

Each spinner is implemented entirely with CSS animations and HTML markup. Developers copy the CSS code and corresponding HTML structure, then paste them directly into their project. The collection includes multiple spinner styles such as a rotating plane, chasing dots, bouncing circles, stretching bars, and moving cubes.

Key Benefits

  • Uses only CSS and HTML — no JavaScript, images, or external dependencies required.
  • Source code is publicly available on GitHub for anyone to view, fork, or contribute.
  • Provides multiple distinct spinner styles including chase dots, double bounce, stretch delay, and cube move.
  • Each spinner includes complete CSS keyframes and HTML markup ready for copy-paste use.
  • Spinners are fully customizable through standard CSS properties like background-color and animation timing.

How It Works

A developer visits the SpinKit page, browses the available spinner animations, and selects one. They copy the CSS code block and the matching HTML structure, then paste both into their own project files. The spinner renders immediately because all animation logic lives in the CSS keyframes.

Use Cases

  • Front-end developers building web applications who need a minimal loading indicator during data fetches.
  • Rapid prototype builders who want a placeholder spinner without adding a library or image asset.
  • CSS learners studying animation keyframes who can inspect and experiment with each spinner's source code.
  • Open-source contributors interested in creating or suggesting new spinner designs via the GitHub repository.

Why Choose This Product

SpinKit is best suited for developers who want pure CSS loading spinners with zero overhead. The project offers no paid tiers, no sign-up requirement, and no feature gates — all spinners are equally accessible. Its main limitation is the fixed set of spinner designs; users who need custom animations must write their own keyframe logic.

SpinKit Pros & Cons

Strengths
  • Zero JavaScript or image dependencies
  • Multiple distinct spinner styles available
  • Source code publicly on GitHub
  • Free and open to all with no sign-up
  • Each spinner includes ready-to-use keyframe animations

Key Features

🧊

Cube Move Spinner

A two-cube CSS animation that moves and rotates in a square pattern, changing scale at each corner.

🔵

Chase Dots Spinner

Six dots orbit a center point in a full circle, each with staggered animation delays for a flowing trail effect.

Double Bounce Spinner

Two circular elements pulse by scaling up and down at offset timing, creating a bouncing appearance.

📊

Stretch Delay Spinner

Five vertical bars stretch in sequence, with each bar delaying its animation start by 0.1 seconds.

🔄

Rotating Plane Spinner

A single rectangular plane rotates 180 degrees on two axes in an infinite loop.

SpinKit Pricing

Free
Free
  • All CSS spinner animations included
  • Complete HTML and CSS code for each spinner
  • Source code available on GitHub

Pricing extracted from the product website and may change. Check the source for current details.

Frequently asked questions about SpinKit

Is SpinKit free?

Yes — SpinKit is free to use. See the pricing section for any optional add-ons.

How much does SpinKit cost?

SpinKit offers the following plans: Free. See the pricing section for what's included in each tier and any per-seat or usage-based costs.

What platforms does SpinKit support?

SpinKit is available on: Web.