react-loading-spin

A simple animated spinner react component.

Usage no npm install needed!

<script type="module">
  import reactLoadingSpin from 'https://cdn.skypack.dev/react-loading-spin';
</script>

README

react-loading-spin CI npm version npm PRs Welcome License: MIT

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 />
    </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-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>
);

Alt Text

Built With

License

MIT - see the LICENSE file for details.