Problem with MoonLoader

[doppelgunner]

The whole body is rotating together with the little thing lol. please fix this I like the moon loader above all.

[davidhu2000]

@doppelgunner can you provide more details? Like what version you are using?

Can you publish your package.json?

[GuillaumeCisco]

@doppelgunner Looks like you have a css that is overridding your loader, try investigating on position css attributes on parents.

[drewandre]

I'm also seeing this... I can't find any computed css that would be overridding the loader.

[GuillaumeCisco]

@drewandre Can you provide a project example maybe? Otherwise, inspect the code on http://www.davidhu.io/react-spinners/ for the moon loader and look a the position css attributes. Maybe wrapping the loader with a css position will make it works correctly. It will allow us to detect the undesired behavior. Thank you,

[jfremy]

I ran into the same issue. In my case, it was due to the "box-sizing" property being set to "border-box" for all divs in the CSS (defined in the theme I use). I used a className css that sets it to "content-box" when calling MoonLoader and this fixed the issue for me

[NamorNimash]

Have the same issue with Moonloader. For example, Cliploader work perfectly in the parent.

[GRMCosta]

Display: flex in css works for me. Example:

import MoonLoader from "react-spinners/MoonLoader"; import { css } from "@emotion/react";

const override = css display: flex; margin: 0 auto; ;

export function Loading() { return ( <MoonLoader color={"#000"} css={override} size={50} /> ) }

[teebszet]

hey I still see a wobbly MoonLoader on the latest version 😅

tried setting the box-sizing on parent element, but no effect

[Fin-Alan]

same issue for me i also tried box-content it did not work

[RigoOnRails]

@teebszet @Fin-Alan Hey guys, I believe this is the issue you were dealing with: https://github.com/davidhu2000/react-spinners/issues/583