MoonLoader doesn't spin

[Samuel-Montoya]

Describe the bug MoonLoader is not rendered like it should. Latest version of React.

To Reproduce Steps to reproduce the behavior:

1. Import MoonLoader import MoonLoader from "react-spinners/MoonLoader"

2. Render in JSX <MoonLoader size={50} />

3. See error

Additional context NPM Version: ^0.10.6 React Version: ^17.0.1 Other loaders seem to work properly.

[YEK-PLUS]

can you share your parent component with css?

[Samuel-Montoya]

can you share your parent component with css?

Sure can!

<div style={{ display: 'table', margin: 'auto' }}>
    <MoonLoader color="white" size={15} />
</div>

[YEK-PLUS]

@Samuel-Montoya try this

<div style={{ display: "flex" }}>
   <MoonLoader size={32} />
</div>

[Samuel-Montoya]

@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?

[hkar19]

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>

[davidhu2000]

can you share all the relevant computed CSS and your jsx used to render? I'm not really seeing the issue.

[hkar19]

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

[YEK-PLUS]

@hkar19 add textAlign: "left" to line 17 this is sandbox

[hkar19]

@hkar19 add textAlign: "left" to line 17 this is sandbox

Right! That could be a workaround id your MoonLoader does not rotate

[keithfrazier98]

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.

[davidhu2000]

sounds like we have a implementation, so going to close this for now