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

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

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

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
`

$3

`jsx

import React from 'react';
import LoadingSpinnerComponent from 'react-spinners-components';

const Example = () => {
return(

);
};

export default Example;
``

References

- All svg animations are provided by loading.io

Author

@kazimkazam

Repository

@Github

@npm

License

MIT © kazimkazam