react-loading-overlay icon indicating copy to clipboard operation
react-loading-overlay copied to clipboard

When using a custom spinner, the spinner isn't centered with text

Open AloysiusParedes opened this issue 5 years ago • 4 comments

I am trying to use https://github.com/davidhu2000/react-spinners

and when I use it, the spinner is not aligned with text

Screen Shot 2019-04-17 at 3 12 23 PM

<LoadingOverlay active={!this.state.isLoaded} spinner={<PulseLoader color={"var(--bluePrimary)"} />} text="Loading data..." fadeSpeed={0} styles={{ wrapper: { width: "100%", height: "100%" } }} >

AloysiusParedes avatar Apr 17 '19 20:04 AloysiusParedes

can you throw a sample up so i can look at it live

derrickpelletier avatar Apr 28 '19 19:04 derrickpelletier

Hi @derrickpelletier , Same here, using this:

 <LoadingOverlay active={loading} spinner={<BounceLoader />} text="Loading...">

Note: it is Next.js https://i.imgur.com/f0nnpri.gifv

lishine avatar May 15 '19 17:05 lishine

@derrickpelletier Any update here? This seems like a really basic feature, so perhaps we are missing something about the intended usage of your library.

raxod502 avatar Mar 17 '20 03:03 raxod502

Ah, I have found that if I use ScaleLoader instead of BounceLoader then the problem does not occur. I could not tell you why.

raxod502 avatar Mar 17 '20 03:03 raxod502