https://github.com/kavindu-mane/react-magic-spinners
✨ React Magic Spinners is a collection of loading spinners for React.js
https://github.com/kavindu-mane/react-magic-spinners
react-spin spinners-react
Last synced: 7 months ago
JSON representation
✨ React Magic Spinners is a collection of loading spinners for React.js
- Host: GitHub
- URL: https://github.com/kavindu-mane/react-magic-spinners
- Owner: kavindu-mane
- License: mit
- Created: 2024-05-01T03:47:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-08T03:53:32.000Z (over 1 year ago)
- Last Synced: 2025-03-13T07:48:01.135Z (7 months ago)
- Topics: react-spin, spinners-react
- Language: TypeScript
- Homepage:
- Size: 1.6 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#
🚀 React Magic Spinners.
## Installation
_Install with npm:_
```bash
npm i react-magic-spinners
```
_Install with bun:_
```bash
bun add react-magic-spinners
```
_Install with yarn:_
```bash
yarn add react-magic-spinners
```
_Install with pnpm:_
```bash
pnpm add react-magic-spinners
```
## Usage
_Import the spinner components:_
```javascript
import { BeatLoader } from "react-magic-spinners";
```
Now you can use all components like bellow.
_Use with default styles:_
```jsx
```
_Use with props:_
```jsx
```
## 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_
```css
--rms-writer-color: your color !important;
```
## License
[](LICENSE)