A robust collection of loaders for React.js
npm install react-loaders-kit
![license]()
A simple yet robust and comprehensive collection of loading animations made with React.js based on inspiration from designers and developers on codepen.
This package was made using the Emotion css library.
All loaders can be found on the demo page
With npm:
``bash`
npm install --save react-loaders-kit
With Yarn:
`bash`
yarn add react-loaders-kit
All loaders come with their own default properties. You have the option to overwrite these properties by passing in your own props into the loaders.
IMPORTANT: All loaders accept a loading prop as a boolean that is required. Without passing the loading prop, an error is thrown. The loader will render none if loading is false.
`js
import React, {useState} from "react";
import { BarsLoader } from 'react-loaders-kit';
//or
import BarsLoader from 'react-loaders-kit/lib/bars/BarsLoader'; // Recommended to reduce bundle size
const MyWonderfulComponent = () => {
const [loading, setLoading] = useState(true);
const loaderProps = {
loading,
size: 35,
duration: 1,
colors: ['#5e22f0', '#f6b93b']
}
return (
)
}
`
Common default props for all loaders:
`js`
loading: true;
pause: false;
IMPORTANT: The loading prop is REQUIRED and needs to be passed for the loader to display.
All loaders accept a pause prop which is a boolean. If pause is true, the animation is paused else it deafults to playing.
Some loaders accept a color prop which is a color hash string in the format of #XXXXXX or #XXX.
Other loaders which have more customization accept a colors prop which is a string array of colors in the format of ['#XXXXXX', '#XXXXXX', ...] or ['#XXX', '#XXX', ...].
The tables below contain the default values of each prop on all loaders.
####
| size: number | colors: string[] |
| -------------|----------------------|
| 50 |['#5e22f0', '#f6b93b']|
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 50 |['#5e22f0', '#5e22f0']| 1 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 35 |['#5e22f0', '#f6b93b']| 1 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1.5 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 50 |'#5e22f0' | 0.7 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1.3 |
####
| boxNumber: number | colors: string[] | duration: number |
| ------------------|---------------------------------|----------------------|
| 3 |['#5e22f0', '#5e22f0', '#5e22f0']| 0.7 |
##### NOTE: The number of boxes must correspond to the number of colors in the array
####
| size: number | colors: string[] | duration: number |
| ------------------|---------------------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0', '#5e22f0']| 0.4 |
####
| size: number | colors: string[] |
| ------------------|--------------------------------------------|
| 40 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']|
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 0.5 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 120 |'#5e22f0' | 1 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0']| 1 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 45 |'#5e22f0' | 2 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 30 |['#5e22f0', '#5e22f0']| 2.5 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 50 |'#5e22f0' | 0.8 |
####
| size: number | colors: string[] |
| ------------------|---------------------------------|
| 35 |['#5e22f0', '#5e22f0', '#5e22f0']|
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 60 |'#5e22f0' | 1 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1 |
####
| size: number | colors: string[] |
| ------------------|----------------------|
| 60 |['#5e22f0', '#5e22f0']|
####
| size: number | colors: string[] | duration: number |
| ------------------|--------------------------------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']| 1 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 45 |'#5e22f0' | 1 |
####
| size: number | colors: string[] |
| ------------------|--------------------------------------------|
| 35 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']|
####
| size: number | color: string |
| ------------------|----------------------|
| 60 |'#5e22f0' |
####
| size: number | color: string |
| ------------------|----------------------|
| 60 |'#5e22f0' |
####
| size: number | colors: string[] |
| ------------------|---------------------------------|
| 80 |['#f6b93b', '#5e22f0', '#ef5777']|
####
| numberOfDots: number | numberOfDots: number | colors: string[] | duration: number |
| ---------------------| ---------------------|---------------------------------|----------------------|
| 90 | 10 |['#5e22f0', '#f6b93b'] | 1.5 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 45 |['#5e22f0', '#5e22f0']| 0.6 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 50 |['#ffffff', '#5e22f0']| 2 |
####
| size: number | jellyNumber: number | colors: string[] | duration: number |
| -------------| --------------------|-------------------------------------------------------|----------------------|
| 150 | 5 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']| 0.6 |
#### NOTE: The number of jellies must correspond to the number of colors in the array
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 60 |['#5e22f0', '#5e22f0']| 0.5 |
####
| lineWidth: number | color: string | duration: number |
| ------------------|----------------------|----------------------|
| 25 |'#5e22f0' | 2 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 130 |['#5e22f0', '#ef5777']| 0.8 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 2 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 60 |['#5e22f0', '#5e22f0']| 1 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0']| 2 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 90 |['#5e22f0', '#5e22f0']| 0.8 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 15 |'#5e22f0' | 0.8 |
####
| size: number | colors: string[] |
| ------------------|---------------------------------|
| 55 |['#5e22f0', '#5e22f0', '#5e22f0']|
####
| size: number | boxBorderWidth: number | colors: string[] | duration: number |
| -------------| -----------------------|--------------------------------------------|----------------------|
| 10 | 2 |['#ffffff', '#ffffff', '#5e22f0', '#5e22f0']| 3 |
####
| size: number | colors: string[] | duration: number |
| ------------------|--------------------------------------------|----------------------|
| 20 |['#5e22f0', '#5e22f0', '#f6b93b', '#ef5777']| 1.2 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 80 |'#5e22f0' | 1 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 10 |['#5e22f0', '#5e22f0']| 1 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 1 |
####
| size: number | colors: string[] |
| ------------------|----------------------|
| 50 |['#5e22f0', '#ffffff']|
####
| size: number | colors: string[] |
| ------------------|--------------------------------------------|
| 50 |['#5e22f0', '#5e22f0', '#5e22f0', '#5e22f0']|
####
| size: number | colors: string[] | duration: number |
| -------------|---------------------------------|----------------------|
| 18 |['#5e22f0', '#5e22f0', '#5e22f0']| 1 |
####
| size: number | colors: string[] | duration: number |
| -------------|---------------------------------|----------------------|
| 20 |['#5e22f0', '#5e22f0', '#5e22f0']| 1 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 0.7 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 35 |['#5e22f0', '#ffffff']| 0.6 |
####
| size: number | colors: string[] | duration: number |
| -------------|----------------------|----------------------|
| 40 |['#5e22f0', '#5e22f0']| 2 |
####
| size: number | color: string | duration: number |
| -------------|----------------------|----------------------|
| 40 |'#5e22f0' | 0.6 |
- Pull requests and ⭐ stars are always welcome
- For bugs and feature requests, please create an issue
MIT