react-spinner-animated

Loader/Spinner Library for React

Customize Your Spinner/Loader

Create your spinner/Loader

Install

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