react-spinners-components
Very easy to use loading spinners for React.
You can check the available loading spinners on the link below:
Install
npm install react-spinners-components
or
yarn add react-spinners-components
Usage
There is a total of 15 types of loading spinners: Ball, Blocks, Cube, Discuss, Disk, DualBall, Eater, Gear, Infinity, Interwind, Pulse, Ripple, Rolling, Spinner, Wedges.
Please capitalize the first letter when inserting the type prop, e.g., Ball ---> 'Ball'.
Please notice the following:
- When the component accepts only one color ---> prop is called color and accepts a single string, e.g., 'red' or '#f91a10';
- When the component needs more than one color ---> prop is called colors and accepts an array of strings with the colors that it needs (check the examples to know how many colors each type needs);
- The size prop needs a string. You can use any unit, e.g., px and rem, but if the unit is not stated, px will be applied by default. Examples: '150px', '10rem', '150';
If no props are given
-
None of the props are required. If no props are given, the react-spinners-components will return the LoadingSpinnerComponent with the 'Ball' type, default color and size.
-
If props color(s) and / or size are not given, default values will be used for the missing props.
Examples
Loading spinner type 'Ball'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Ball' } color={ 'red' } size={ '100px' } />
);
};
export default Example;
Loading spinner type 'Blocks'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Blocks' } colors={ [ '#06628d', '#f91a10' ] } size={ '100px' } />
);
};
export default Example;
Loading spinner type 'Cube'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Cube' } colors={ [ '#06628d', '#f91a10', 'yellow', 'purple' ] } size={ '100px' } />
);
};
export default Example;
Loading spinner type 'Discuss'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Discuss' } color={ '#06628d' } size={ '100px' } />
);
};
export default Example;
Loading spinner type 'Disk'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Disk' } colors={ [ '#06628d', 'purple'] } size={ '100px' } />
);
};
export default Example;
Loading spinner type 'DualBall'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'DualBall' } colors={ [ '#06628d', 'purple', '#06628d'] } size={ '200px' } />
);
};
export default Example;
Note: 'DualBall' can actually work like a 'TriBall' by using 3 different colors, example below:
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'DualBall' } colors={ [ '#06628d', 'purple', 'yellow'] } size={ '200px' } />
);
};
export default Example;
Loading spinner type 'Eater'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Eater' } colors={ [ '#06628d', 'purple'] } size={ '150px' } />
);
};
export default Example;
Loading spinner type 'Gear'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Gear' } color={ 'purple' } size={ '150px' } />
);
};
export default Example;
Loading spinner type 'Infinity'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Infinity' } color={ 'purple' } size={ '150px' } />
);
};
export default Example;
Loading spinner type 'Interwind'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Interwind' } colors={ [ '#06628d', 'purple'] } size={ '125px' } />
);
};
export default Example;
Loading spinner type 'Pulse'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Pulse' } colors={ [ '#06628d', 'purple', 'blue'] } size={ '150px' } />
);
};
export default Example;
Loading spinner type 'Ripple'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Ripple' } colors={ [ '#06628d', 'purple'] } size={ '150px' } />
);
};
export default Example;
Loading spinner type 'Rolling'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Rolling' } color={ 'purple' } size={ '150px' } />
);
};
export default Example;
Loading spinner type 'Spinner'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Spinner' } color={ 'purple' } size={ '150px' } />
);
};
export default Example;
Loading spinner type 'Wedges'
import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';
const Example = () => {
return(
<LoadingSpinnerComponent type={ 'Wedges' } colors={ [ '#06628d', 'purple', 'blue', 'yellow'] } size={ '300px' } />
);
};
export default Example;
References
Author
@kazimkazam
Repository
@Github
@npm
License
MIT © kazimkazam
