lukehaas / css-loaders

A collection of loading spinners animated with CSS
MIT License
7.05k stars 1.04k forks source link

Fix switching same colors #36

Open HatimLagzar opened 4 years ago

HatimLagzar commented 4 years ago

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