Loader

The ELoader component is a dynamic visual element that displays ongoing activities or data loading. Demo Here

Import

import ELoader from "@components/Elements/ELoader";

Usage

const LoaderExample = () => {
  const [isLoading,setIsLoading] = useState(false);

  const toggleLoader = () => {
    setIsLoading(!isLoading)
  };

  return (
    <Fragment>
      <EBtn onClick={toggleLoader}>
        Open loader
      </Btn>
      <ELoader loading={isLoading} spinner="beat"/>
    </Fragment>
  );
};

export default LoaderExample;

Props

For ELoader component, the following props are available:

Prop	Type	Default	Note
portal	Boolean	true	Enables react portal.
blurEffect	Boolean	true	Applies background blur.
loading	Boolean	false	It controls the active state of the loader.
className	String	-	Overrides or extends the component's styles.
customColor	String	-	A custom color in rgb format is applied to the loader (e.g, customColor="101, 89, 204").
spinner	String	"clip"	The ELoader element can be represented in four ways: beat, bounce, moon and clip.
color	String	"primary"	The given color is applied to the loader - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

Children

The ELoader component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.