gitwtfhub

wtf is css-loaders?

lukehaas/css-loaders — explained in plain English

Analysis updated 2026-06-22

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

TL;DR

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

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

Why would anyone build with this?

REASON 1

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

REASON 2

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

REASON 3

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

What's in the stack?

CSSHTML

How it stacks up

lukehaas/css-loaderserikflowers/weather-iconshubspot/vex
Stars7,0607,1236,887
LanguageCSSCSSCSS
Setup difficultyeasyeasyeasy
Complexity1/51/51/5
Audiencedeveloperdeveloperdeveloper

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

How do you spin it up?

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.

Wtf does this do

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.

Yoink these 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.

Frequently asked questions

wtf is css-loaders?

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.

What language is css-loaders written in?

Mainly CSS. The stack also includes CSS, HTML.

What license does css-loaders use?

MIT License, use freely in any personal or commercial project as long as you keep the copyright notice.

How hard is css-loaders to set up?

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

Who is css-loaders for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.