Closed Samuel-Montoya closed 2 years ago
can you share your parent component with css?
can you share your parent component with css?
Sure can!
<div style={{ display: 'table', margin: 'auto' }}>
<MoonLoader color="white" size={15} />
</div>
@Samuel-Montoya try this
<div style={{ display: "flex" }}>
<MoonLoader size={32} />
</div>
@Samuel-Montoya try this
<div style={{ display: "flex" }}> <MoonLoader size={32} /> </div>
Hmm, No luck.. It seems to be spinning with the outer circle. Maybe it's because I have it nested in a <button>
tag?
i find it is weird that if i put the moonloader in a flexbox, the moonloader rotates with the center in the white part of the moonloader
such as
<div style={{display:'flex', justifyContent:'center', alignItems:'center'}}>
<MoonLoader
color={'#fff'}
loading={true}
/>
</div>
can you share all the relevant computed CSS and your jsx used to render? I'm not really seeing the issue.
this is sandbox for my issue.
i have noticed that even though both MoonLoader
and ClipLoader
are somewhat similar in the way theyre spinning, but only MoonLoader
circling in unexpected manner
@hkar19 add
textAlign: "left"
to line 17 this is sandbox
Right! That could be a workaround id your MoonLoader
does not rotate
I just came across the same issue with the moon loader with this code:
<div className="pr-3 flex flex-row items-center">
{`${pending} Pending`}
<div className="ml-2 w-5 h-5">
<MoonLoader size="24px" color="#f3c429" />
</div>
</div>
I was able to fix it by rendering the Moonloader alone without inhibiting its container, and just adding styling to the text on the left of it:
<div className="flex flex-row items-center">
<p className="mr-2">{`${pending} Pending`}</p>
<MoonLoader size="15px" color="#f3c429" />
</div>{" "}
Which seems like the better way to have coded that in the first place.
sounds like we have a implementation, so going to close this for now
Describe the bug MoonLoader is not rendered like it should. Latest version of React.
To Reproduce Steps to reproduce the behavior:
Import MoonLoader
import MoonLoader from "react-spinners/MoonLoader"
Render in JSX
<MoonLoader size={50} />
See error
Additional context NPM Version: ^0.10.6 React Version: ^17.0.1 Other loaders seem to work properly.