react-spinners-components

Very easy to use loading spinners for React.

You can check the available loading spinners on the link below:

https://showcase-react-spinners-components.netlify.app

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'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Ball' } color={ 'red' } size={ '100px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Blocks'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Blocks' } colors={ [ '#06628d', '#f91a10' ] } size={ '100px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Cube'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Cube' } colors={ [ '#06628d', '#f91a10', 'yellow', 'purple' ] } size={ '100px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Discuss'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Discuss' } color={ '#06628d' } size={ '100px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Disk'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Disk' } colors={ [ '#06628d', 'purple'] } size={ '100px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'DualBall'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'DualBall' } colors={ [ '#06628d', 'purple', '#06628d'] } size={ '200px' } />
8  );
9};
10
11export default Example;

Note: 'DualBall' can actually work like a 'TriBall' by using 3 different colors, example below:

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'DualBall' } colors={ [ '#06628d', 'purple', 'yellow'] } size={ '200px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Eater'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Eater' } colors={ [ '#06628d', 'purple'] } size={ '150px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Gear'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Gear' } color={ 'purple' } size={ '150px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Infinity'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Infinity' } color={ 'purple' } size={ '150px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Interwind'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Interwind' } colors={ [ '#06628d', 'purple'] } size={ '125px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Pulse'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Pulse' } colors={ [ '#06628d', 'purple', 'blue'] } size={ '150px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Ripple'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Ripple' } colors={ [ '#06628d', 'purple'] } size={ '150px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Rolling'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Rolling' } color={ 'purple' } size={ '150px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Spinner'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Spinner' } color={ 'purple' } size={ '150px' } />
8  );
9};
10
11export default Example;

Loading spinner type 'Wedges'

1
2import React from 'react';
3import LoadingSpinnerComponent from 'react-spinners-components';
4
5const Example = () => {
6  return(
7    <LoadingSpinnerComponent type={ 'Wedges' } colors={ [ '#06628d', 'purple', 'blue', 'yellow'] } size={ '300px' } />
8  );
9};
10
11export default Example;

References

• All svg animations are provided by loading.io

Author

@kazimkazam

Repository

@Github

@npm

License

MIT © kazimkazam