whatisgithub

What is css-loaders?

lukehaas/css-loaders — explained in plain English

Analysis updated 2026-06-22

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

In one sentence

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

What do people build with it?

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

What is it built with?

CSSHTML

How does it compare?

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 get 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.

So what is it?

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.

Frequently asked questions

What 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.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.