react-spinner-animated

3.1.1 • Public • Published

react-spinner-animated

Loader/Spinner Library for React

NPM JavaScript Style Guide

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

Package Sidebar

Install

npm i react-spinner-animated

Weekly Downloads

82

Version

3.1.1

License

MIT

Unpacked Size

94 kB

Total Files

7

Last publish

Collaborators

  • venusha