Spinners

Mostly used as a loading indication, Spinner components may be placed alone or inside other components like buttons to enhance user experience while data is retrieved from your server. It is available in a variety of colors, sizes, and shapes. We have used ESpinner component in Eloader and loader EBtn elements.

Import

import EBeat from "@components/Elements/ESpinners/EBeat";
import EClip from "@components/Elements/ESpinners/EClip";
import EMoon from "@components/Elements/ESpinners/EMoon";
import EBounce from "@components/Elements/ESpinners/EBounce";

Usage

It comes in four shapes :

1. Beat

<EBeat/>

<EBeat loading={true}/>

2. Bounce

<EBounce/>

<EBounce loading={true} />

3. Clip

<EClip/>

<EClip loading={true}/>

4. Moon

<EMoon/>

<EMoon loading={true}/>

Props

For Spinner components, the following props are available:

Prop	Type	Default	Note
loading	Boolean	false	Displays spinners.
size	[Number, String]	"1.25rem"	It will be assigned to width and height.
className	String	-	Overrides or extends the component's wrapper styles.
customColor	String	-	A custom color in rgb format is applied to the Spinners (e.g, customColor="101, 89, 204").
color	String	"primary"	The given color is applied to the Spinners - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.