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.