react-magic-spinners
v0.1.0
Published
React Magic Spinners is a collection of loading spinners for React.js
Downloads
19
Maintainers
Readme
🚀 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;