🚀 React Magic Spinners.

Installation

Install with npm:

npm i react-magic-spinners

Install with bun:

bun add react-magic-spinners

Install with yarn:

yarn add react-magic-spinners

Install with pnpm:

pnpm add react-magic-spinners

Usage

Import the spinner components:

import { BeatLoader } from "react-magic-spinners";

Now you can use all components like bellow.

Use with default styles:

<BeatLoader/>

Use with props:

<BeatLoader
 dotsSize={"2rem"}
 duration={2}
 dotsCount = {3}
 iterationCount = "infinity"
/>

Available Spinners

• BarLoader
• BeatLoader
• BounceLoader
• CircleLoader
• ClimbingBoxLoader
• ClipLoader
• GridLoader
• Writer

Props

BarLoader

Name	Description	Default	Required	Data Type
width	Width of the loader	200	No	number or string
height	Height of the loader	10	No	number or string
duration	Duration of the animation	3	No	number
color	Color of the loader	#d20062	No	string
trackColor	Color of the loader's track	#d2006260	No	string
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string
isRoundCap	Whether the loader has round cap	true	No	boolean

BeatLoader

Name	Description	Default	Required	Data Type
dotsSize	Size of the dots	16	No	number or string
duration	Duration of the animation	0.5	No	number
color	Color of the loader	#d20062	No	string
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string
margin	Margin between the dots	4	No	number or string
dotsCount	Number of dots in the loader	3	No	number

BounceLoader

Name	Description	Default	Required	Data Type
size	Size of the loader	64	No	number or string
duration	Duration of the animation	2	No	number
color	Color of the loader	#d20062	No	string
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string
isBorderOnly	Whether the loader is border only	false	No	boolean
borderWidth	Width of the border	2	No	number

CircleLoader

Name	Description	Default	Required	Data Type
size	Size of the loader	112	No	number or string
borderWidth	Width of the border	1	No	number
circleCount	Number of circles in the loader	5	No	number
duration	Duration of the animation	1	No	number
color	Color of the loader	#d20062	No	string
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string
isCentered	Whether the loader is centered	false	No	boolean

ClimbingBoxLoader

Name	Description	Default	Required	Data Type
size	Size of the loader	16	No	number
duration	Duration of the animation	2	No	number
color	Color of the loader	#d20062	No	string
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string

ClipLoader

Name	Description	Default	Required	Data Type
size	Size of the loader	32	No	number
borderWidth	Width of the border	2	No	number
duration	Duration of the animation	1	No	number
color	Color of the loader	#d20062	No	string
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string

GridLoader

Name	Description	Default	Required	Data Type
dotsSize	Size of the dots	16	No	number or string
duration	Duration of the animation	1	No	number
color	Color of the loader	#d20062	No	string
backgroundColor	Background color of the loader	transparent	No	string
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string
margin	Margin between the dots	3	No	number or string
rows	Number of rows in the grid	3	No	number
columns	Number of columns in the grid	3	No	number

Writer

Name	Description	Default	Required	Data Type
text	Text to be written	Hello	No	string
fontSize	Font size of the text	5rem	No	number or string
fontFamily	Font family of the text	Arial	No	string
fontWeight	Font weight of the text	600	No	number or string
width	Width of the loader	500	No	number
height	Height of the loader	200	No	number
backgroundColor	Background color of the loader	transparent	No	string
duration	Duration of the animation	3	No	number
iterationCount	Number of animation iterations	infinite	No	number or string
style	CSS styles	undefined	No	React.CSSProperties
className	CSS class name	undefined	No	string

If you need change writer text color.add this line to your css file

 --rms-writer-color: your color !important;

License