by lukehaas

lukehaas / css-loaders

A collection of loading spinners animated with CSS

6.5K Stars 1.0K Forks Last release: Not found MIT License 56 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Single Element CSS Spinners

This is a collection of loading spinners animated with CSS.

Each spinner consists of a single

with a class of
and content text of "Loading...". The text is for screen readers and can be used as a fallback state for older browsers.

The aim of this project was to create a set of minimal loading spinners that are visually appealing and also convey their intended meaning.

A strict limit of one element per loader (not including pseudo-elements) was placed on this project based on the belief that something as simple as a loader doesn't deserve more.

Each loader is given a font size in pixels and all other sizes are in ems so to change the size of a loader, just adjust the font-size.



Check it live.

Browser Support


Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 4.0+ ✔ Firefox 16.0+ ✔ Opera 15.0+ ✔ Safari 4.0+ ✔


  1. Fork it!
  2. Create your feature branch:
    git checkout -b my-new-feature
  3. Commit your changes:
    git commit -m 'Add some feature'
  4. Push to the branch:
    git push origin my-new-feature
  5. Submit a pull request :)


For detailed changelog, check Releases.


MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.