lukehaas / css-loaders

A collection of loading spinners animated with CSS

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

Check it live.

Browser Support

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

css-loaders's Issues

[Suggestion] document loader with full-screen overlay

beautiful loaders!

for people like me who suck at css it would be nice to have documentation of how to use the loaders with a full-screen overlay with adjustable overlay background opacity. i could only come up with the following code (opaque background), still can't figure out how to center the loader.

.load-container {
  position: fixed;
  display: block;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $loader-background-color;
}

.loader {
  z-index: 1001;
}

high cpu usage

the animations are cool and pretty, but one loader on a page can make firefox spike my cpu to around 50%

so they're not really usable...

Adding a demo page?

Add to bower

spinners name

Hey man really like your spinners, though they are lacking in name, I want to make a custom replacement for ionic framework loading icon, which really look unpolished and ugly, even worst bouncing in android. Can we have a name?

Different size spinners?

I haven't invested too much effort into this.

After changing some of the sizing in the css I haven't had any success rendering a spinner at a smaller size (say, ~2em)

any thoughts?

Publish on npm

It would be nice if we could use this as a dependency from npm.

Can I use it with white background page?

Thanks for the awesome project!

My pages are white background. The loader becomes transparent on my site.

How to use the loader with white background page?

Thanks!

What browsers are supported?

Don't seem to work on Android 2.3

Please, can you fix them to work on Android 2.3 devices? Simply add -webkit attributes and other minor changes to make it work, thanks.

Change spinner colour

Not really an issue, but a suggestion:

It would be great if there was a way to change the color of the spinning element directly from the css-loaders website. I have been doing it manually, and sometimes it isn't as straightforward as replacing the color codes especially for the spinners with rgba colors.

Otherwise, great tool.

Using load7 inside an aligned center (translate) div causes issue.

I have posted the question in detail on stackoverflow

Basically translate(-50%, -50%) cutsoff the load7 animation from bottom.

font-size below 6px on chrome doesn't work

It seems like setting font-size below 6px on chrome doesn't work.

It is better if I can set the width and height with scss

It is better if I can set the width and height with scss

Can these be added to buttons

Are these adjustable to work with buttons where you want the text to change to a spinner?

How to resize the loaders

Sorry if it's a noob question but I am kinda confused here, I tried changing the container size, the loader div's width/height, the font-size. nothing seems to work.
Any help would be appreciated.

Wrong behaviour on load6

When the loader begin its cycle, the last 2-3 circles go back when they should start from point 0 (the top).

image: http://imageshack.com/a/img536/999/QU9wjA.jpg
Also, the ark is wrong and it doesnt follow the circle motion which make this particular loader look weird.

Transparent Background

When trying to use transparently, most of these loaders do not work well. Any chance they could be tweaked to work in a transparent environment?

There is a Problem in the project page .

As you can see here the copyright things is not in the footer section , it is showing up in the main section .

Loading indicator for pseudo-elements

It would be handy if there was an example of css only indicators that could be use on pseudo elements like html:after

How can I contribute to the project.

I loved this project and I think I should also contribute to this project.

But I am having trouble in that,
I got where to add the loader's CSS that is in the sass folder, css folder and less folder.
But I can't find where to add the loader's HTML. 😓

Please help me to contribute to this project or better you can add a CONTRIBUTING.md file.

That makes sense. Hope it heps. 👍

Add a new loader

Add a rectangular loader.