search

GriffinJohnston / ldrs

Modern, tree-shakeable loader & spinner web components. Made with CSS, HTML and SVG. https://uiball.com/ldrs
MIT License
1.75k stars 54 forks source link

Black circle shows up breifly before the loader #11

Closed nahasco closed 1 year ago

nahasco commented 1 year ago

So before the loader shows up and starts spinning a black circle is visible briefly. What could be causing this issue?

image

I throttled down the website to capture it. Here is the svg code too: <svg height="50" width="50" class="Ring-module_container__1mCd7" viewBox="25 25 50 50" style="--uib-size:50px;--uib-color:#0666EB;--uib-speed:2s"><circle cx="50" cy="50" r="20" stroke-width="5"></circle></svg>

GriffinJohnston commented 1 year ago

That sounds like the SVG Circle is showing a black fill before css loads. I'll take a look when I'm in front of my computer, but something you could investigate if you have CSS in your app somewhere that applies a fill to all SVGs? I may need to add fill="none" to the circle element used in this loader.

nahasco commented 1 year ago

Its a new project, so I am pretty sure there are no styles that apply fills to SVGs

nahasco commented 1 year ago

adding fill: none fixed the issue

circle { fill:none; }

GriffinJohnston commented 1 year ago

Good! I'll add this by default when I get a moment. I'm traveling right now so I'm slow 🙂

GriffinJohnston commented 1 year ago

As of v1.3.0 this is added inline to the circle element used in the Ring loader.