react-spinners icon indicating copy to clipboard operation
react-spinners copied to clipboard

Pacman Loader overlaps with other content

Open bsgriggs opened this issue 3 years ago • 2 comments

Package Version 0.13.6

Describe the bug I have a caption that is supposed to be rendered underneath the pacman loader, but the pacman's head overlaps with nearby content;

To Reproduce JSX similar to the following <div id={name} className="mx-spinner"> <PacmanLoader aria-label="Loading Pacman Spinner" color={spinnerColor} speedMultiplier={speedMultiplier} size={spinnerSize} /> <span>{spinnerCaption?.value}</span> </div>

Expected behavior The bounds of the loader should push other content.

Screenshots Current: Screenshot 2022-11-01 at 10 54 01 AM

Expected: Screenshot 2022-11-01 at 10 35 02 AM

Additional context Note this can be fixed by setting Width and Height of the parent container with 2x the user's size value

cssOverride={{width: calc(${spinnerSize} * 2), height:calc(${spinnerSize} * 2)}}

bsgriggs avatar Nov 01 '22 15:11 bsgriggs

Same thing with Rotate, Propagate, and Sync

bsgriggs avatar Nov 01 '22 15:11 bsgriggs

@bsgriggs PacmanLoader is fixed in 0.13.7 based on your recommendation, still need to look into the other 3.

davidhu2000 avatar Dec 03 '22 06:12 davidhu2000