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.

Improvement on circular path (location computed with sin & cos) and more/different steps to have a better transformation (closer to a real circle), as asked in #11. I only made changes in the Less file (.css and .html are generated). Feel free to tell me if it's not suitable.

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.

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!

There is a subtle displacement of the overlays in load2 which results in “ghost lines” where the circle is not completely covered. This commit fixes that issue by centering the overlays and there rotation origins.

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.

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?

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. :+1:

Note: This suggestion is for the website (generator) and not the repository here.

Hi Luke, I've been using your loaders lately, it's a nice light spinner, I used the website for generating my colors for the loader 3, in my case I did choose the white background and black foreground which triggered a problem and lead me to try to fix the output CSS manually because I got everything in black, and I fix it, I looked over your main.js file to try to find the problem and here's it. The issue comes from replacing and specifically from switching between the same initial colors here's an example. Starting from the initial colors (BG: green, FG: white), choose a white background at this point the output has everything in white. When choosing another color on the white foreground the script will try to replace the old foreground (white) with the chosen color (XYZ) which makes the script replace everything to XYZ. The solution that I found is not optimal but simple: using different formats for both colors. eg: if you're changing the BG, we will make sure we have a different format from the FG (BG: #000000FF and the FG: #00000) so when we are changing the colors related to the BG(#000000FF) we will not replace the FG too. I hope that the example is clear, don't hesitate to text me for more details.

The second problem comes from my solution, let's say we have the BG on #000000 and the FG is on #000000FF and we want to replace all the #000000 to #FFFFFF which will make everything in white again, the solution I suggested is to look for "the whitespace" and the ";" too to have a precise replacement pattern.

Thank you so much for this helpful spinner

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