explaingit

lukehaas/css-loaders

★ 7,060CSSAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

CSS Loaders is a collection of animated loading spinners built purely in CSS, each requiring just one HTML element, resizable by changing a single font-size value, copy-paste ready for any web project.

Mindmap

mindmap
  root((css-loaders))
    What it does
      CSS-only spinners
      Single element each
      Em-based resizing
    Browser support
      IE 10 plus
      Chrome Firefox Safari
    Use cases
      Loading states
      Page transitions
      Form submission
    Features
      No JavaScript
      Screen reader text
      MIT licensed
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

Copy a CSS loading spinner into your web app to display while content is loading, with no JavaScript or extra markup needed

USE CASE 2

Resize any spinner to fit your layout by changing a single font-size CSS property

USE CASE 3

Add accessible loading indicators that include built-in screen reader text out of the box

Tech stack

CSSHTML

Getting it running

Difficulty · easy Time to first run · 5min
MIT License, use freely in any personal or commercial project as long as you keep the copyright notice.

In plain English

CSS Loaders is a collection of animated loading spinners built entirely with CSS. Each spinner is made from a single HTML element, a div with a class of "loader", with no additional markup beyond optional CSS pseudo-elements. The text content "Loading..." is included for screen readers and older browsers that may not support CSS animations. The project was created with a deliberate constraint: every spinner must use exactly one HTML element. The idea behind this limit is that a loading indicator is a small, simple thing that should not require complex markup. Because all sizing uses the em unit relative to a base font size, you can resize any spinner by changing just the font-size property on it. The spinners work across a broad range of browsers including Internet Explorer 10 and later, Chrome 4 and later, Firefox 16 and later, Opera 15 and later, and Safari 4 and later. A live demo is linked from the project README so you can preview each animation style before deciding which one to use in your project. The repository is licensed under the MIT License, which allows free use in personal and commercial projects. Contributions are accepted through the standard GitHub pull request workflow: fork the repository, create a branch for your change, commit it, and open a pull request.

Copy-paste prompts

Prompt 1
I want to add a loading spinner to my React app while data fetches. Using css-loaders, give me the CSS and HTML for a spinner that works on a dark background.
Prompt 2
How do I resize a css-loaders spinner to be smaller and change its color to match my brand's primary color?
Prompt 3
Give me the css-loaders code for a spinner that animates smoothly on mobile and works in Internet Explorer 10.
Prompt 4
Show me how to add a css-loaders spinner that appears only when a form is submitting, and disappears when the response arrives.
Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.