Repository files navigation

A collection of loading spinners with React.js based onHalogen.

This package is bootstraped usingreact-npm-boilerplate

Demo Page

Storybook

With Yarn:

yarn add react-spinners

With npm:

npm install --save react-spinners

Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.

Each loader accepts aloading prop as a boolean. The loader will rendernull ifloading isfalse.

import{useState,CSSProperties}from"react";import{ClipLoader}from"react-spinners";constoverride:CSSProperties={display:"block",margin:"0 auto",borderColor:"red",};functionApp(){let[loading,setLoading]=useState(true);let[color,setColor]=useState("#ffffff");return(<divclassName="sweet-loading"><buttononClick={()=>setLoading(!loading)}>Toggle Loader</button><inputvalue={color}onChange={(input)=>setColor(input.target.value)}placeholder="Color of the loader"/><ClipLoadercolor={color}loading={loading}cssOverride={override}size={150}aria-label="Loading Spinner"data-testid="loader"/></div>);}exportdefaultApp;

importReactfrom"react";import{ClipLoader}from"react-spinners";constoverride:React.CSSProperties={display:"block",margin:"0 auto",borderColor:"red",};classAwesomeComponentextendsReact.Component{constructor(props){super(props);this.state={loading:true,};}render(){return(<divclassName="sweet-loading"><ClipLoadercssOverride={override}size={150}color={"#123abc"}loading={this.state.loading}speedMultiplier={1.5}aria-label="Loading Spinner"data-testid="loader"/></div>);}}

Common default props for all loaders:

loading: true;color: "#000000";cssOverride: {}speedMultiplier: 1;

All valid HTML props such asaria-* anddata-* props are fully supported.

color prop accepts a color hash in the format of#XXXXXX or#XXX. It also accepts basic colors listed below:

maroon, red, orange, yellow, olive, green, purple, white,fuchsia, lime, teal, aqua, blue, navy, black, gray, silver

ThecssOverride prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid here.

The input to these props can benumber orstring.

• If value is number, the loader will default to css unitpx.
• If value is string, the loader will verify the unit against valid css units.
  • If unit is valid, return the original value
  • If unit is invalid, output warning console log and default topx.

The table below has the default values for each loader.