Need help with css-loaders?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

lukehaas
6.6K Stars 1.0K Forks MIT License 56 Commits 18 Opened issues

Description

A collection of loading spinners animated with CSS

Services available

!
?

Need anything else?

Contributors list

# 12,895
CSS
Sass
Node.js
desktop...
37 commits
# 19,052
CSS
codeign...
data-st...
flexbox...
5 commits
# 29,969
CSS
Twitter
js
Svelte
3 commits
# 3,350
CSS
css-fra...
Sass
syntax-...
1 commit
# 118,186
CSS
JavaScr...
1 commit

Single Element CSS Spinners

This is a collection of loading spinners animated with CSS.

Each spinner consists of a single

div
with a class of
loader
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.

Demo

css-loaders-screenshot

Check it live.

Browser Support

IE

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

Contributing

  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 :)

History

For detailed changelog, check Releases.

License

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.