Skip to content

venushadilshan/react-spinner-animated

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-spinner-animated

Loader/Spinner Library for React

NPM JavaScript Style Guide


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