lukehaas / css-loaders Goto Github PK

I have posted the question in detail on stackoverflow

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

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

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.

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.

Add a rectangular loader.

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

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.

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?

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;
}

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!

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

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?

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

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

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

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.

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

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

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?