react-element-spinner

React element spinner

A customizable loading spinner for React that overlays divs and blocks buttons.

Demo

There is a demo with some examples here. The repo with the code is this one.

Quick start

This code would create a global spinner, it would block all the page.

import { SpinnerComponent } from 'react-element-spinner';

<SpinnerComponent loading={true} position="global" />

This code would create a spinner that blocks the form.

import { SpinnerComponent } from 'react-element-spinner';

<form>
    <SpinnerComponent loading={true} position="centered" />
    <input type="text" name="address"/>
    <button>SAVE</button>
</form>

This code would create a spinner that blocks the button.

import { SpinnerComponent } from 'react-element-spinner';

<button>
  Button
  <SpinnerComponent loading={true} position="inline" color="#498DFF"/>
</button>

Properties

Name	Type	Required	Default	Description
loading	boolean	true	-	Whether the spinner has to be shown or not.
position	string	true	-	Position of the spinner: "global" for all the page, "centered" to overlay a div and "inline" to be next to the content (for example a button).
color	string	false	#3578e5	Color of the spinner
secondaryColor	string	false	#f3f3f3	Secondary color of the default spinner.
backgroundColor	string	false	#d3d3d3	Color of the background div (only for "centered" and "global").
resize	boolean	false	false	Whether to resize the overlay div or not when dimensions change (only for "centered").
spinnerType	string	false	"default"	Choose one of the three available spinners: "default", "circle-dots" or "circle-dots-collapse".
customSpinner	ReactElement	false	undefined	Custom spinner to use instead of the default ones.
message	string	false	undefined	Message to show under the spinner.

Custom styling

The spinner component is easily customizable by overriding its css classes.

Class	Element
loader-container	The main div.
loader	The spinner div.
background	The background div.
span	The message.