react-loading-spin

A simple reusable animated spinner react component.

Preview

Alt Text

Install

npm i --save react-loading-spin

Import

import LoadingSpin from "react-loading-spin";

Use

const ExampleOfUsingDefaultLoadingSpin = () => (
    <div className={"ExampleOfUsage"}>
        <LoadingSpin ></LoadingSpin>
    </div>
);

Alt Text

Manage Properties

Property name	type	Required	Default value	Comment
size	`string`	`false`	‘60px’	CSS length value for `height` and `width` of the spinner
width	`string`	`false`	‘6px’	CSS length value for width the spinner
primaryColor	`string`	`false`	‘#1ecd96’	CSS color value for one half of the loader
secondaryColor	`string`	`false`	‘#cccccc’	CSS color value for second half of the loader
animationDuration	`string`	`false`	‘2s’	CSS `animation-duration`property value
animationTimingFunction	`string`	`false`	‘ease-in-out’	CSS `animation-timing-function` property value
animationDirection	`string`	`false`	‘normal’	CSS `animation-direction` property value
numberOfRotationsInAnimation	`number`	`false`	2	number of spins during single animation

const ExampleOfUsingLoadingSpinWithProps = () => (
    <div className={"ExampleOfUsage"}>
        <LoadingSpin
            duration="2s"
            width="15px"
            timingFunction="ease-in-out"
            direction="alternate"
            size="200px"
            primaryColor="yellow"
            secondaryColor="#333"
            numberOfRotationsInAnimation={2}
        ></LoadingSpin>
    </div>
);

Alt Text

Built With

License

MIT - see the LICENSE file for details.