react-loading-spin

react-loading-spin

A simple reusable animated spinner react component.

Preview

Install

npm i --save react-loading-spin

Import

import LoadingSpin from "react-loading-spin";

Use

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

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-durationproperty 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}
        />
    </div>
);

Built With

• Webpack
• Pleasure

License

MIT - see the LICENSE file for details.