🚀 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 both 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

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

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

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

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

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

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

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

| 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