explaingit

connoratherton/loaders.css

★ 10,242CSSAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

loaders.css is a collection of pure-CSS loading spinner animations you can drop into any website, no JavaScript required, just include the stylesheet and add a class name to a div.

Mindmap

mindmap
  root((loaders.css))
    What it does
      CSS-only spinners
      No JavaScript needed
      Performant animations
    Usage
      Add a CSS class
      Child div elements
      Optional jQuery plugin
    Customization
      Change color via CSS
      Resize with scale
    Ports
      React and Vue
      Angular and Ember
      iOS and Android
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

Things people build with this

USE CASE 1

Show an animated spinner while waiting for an API response so users know the page hasn't frozen.

USE CASE 2

Add a loading indicator to a form submit button to prevent double-clicks and signal that a request is processing.

USE CASE 3

Embed a CSS-only spinner in an environment where JavaScript is blocked or unavailable, such as a static HTML email.

Tech stack

CSSJavaScript

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

loaders.css is a collection of loading spinner animations written entirely in CSS, with no JavaScript required. When you are building a website and need something to show users while content is loading, you add one of these animations to a page element using a CSS class name. The animation then runs in the browser using only CSS properties, no scripts involved. The project focuses on keeping the animations performant. Each one is built using a limited set of CSS properties chosen specifically to avoid triggering expensive browser operations like full-page layout recalculations or pixel repaints. The README links to several articles explaining why this matters for smooth animation on lower-powered devices. To use it, you include the minified CSS file, create a div element, and add the relevant class name such as ball-pulse or ball-grid-pulse. Each animation requires a specific number of child div elements inside the wrapper. An optional jQuery plugin called loaders.js handles injecting those child divs automatically, so you do not have to count them yourself. Customization is done through plain CSS. You can change the color by targeting the child div elements and setting a background color, and you can resize the animation using a CSS scale transform. Browser support covers all recent browsers and goes back to Internet Explorer 9. The library is available on npm and previously on Bower. Community members have also ported the animations to React, Vue, Angular, Ember, iOS, and Android, with links to those ports in the README. The project is MIT licensed.

Copy-paste prompts

Prompt 1
Using loaders.css, show me the exact HTML and CSS to display a ball-pulse spinner while my fetch() API call is running.
Prompt 2
How do I change the color of a loaders.css spinner to match my brand's hex color using plain CSS?
Prompt 3
How do I make a loaders.css animation twice as large without editing the library source?
Prompt 4
Which loaders.css spinner works best as a full-page loading overlay and how do I center it vertically and horizontally?
Open on GitHub → Explain another repo

← connoratherton on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.