react-spinner-animated
react-spinner-animated copied to clipboard
Published
20 hours ago •
venushadilshan
venushadilshan
Animated, Customizable Spinner/Loader Library for React
react-spinner-animated
Loader/Spinner Library for React
Customize Your Spinner/Loader
Create your spinner/LoaderInstall
npm i react-spinner-animated
Variations
<BarLoader/><DoubleBubble><SlidingPebbles/><DoubleOrbit/><Spinner/><HalfMalf/><TripleMaze/>
Usage
You must import both the Loader/Spinner component and index.css
i.e - import 'react-spinner-animated/dist/index.css'
import { BarLoader,DoubleBubble, SlidingPebbles }
from 'react-spinner-animated';
import 'react-spinner-animated/dist/index.css'
class MyComponent extends Component {
render() {
return <DoubleOrbit text={"Loading..."} bgColor={"#F0A500"}
center={false} width={"150px"} height={"150px"}/>
}
}
Props
| Prop | Usage | Default | Type |
|---|---|---|---|
| text | Custom text for display with the loader/spinner | " " | Strings |
| bgColor | Custom text for display with the loader/spinner | White | Any color name or HEX color code |
| width | width of the container | - | pixels (150px) |
| height | height of the container | - | pixels (150px) |
| center | Place the component fixed at the center of the page | true | Boolean (true, false) |
See you again with more spinners
License
MIT © venushadilshan
Metadata
24
Stars
8
Forks
Watchers
Owner
venushadilshan
Metadata
Animated, Customizable Spinner/Loader Library for React