Loader

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

Usage

<template>
  <EBtn @click="toggleLoader">Open loader</EBtn>
  <ELoader :loading="isLoading" spinner="beat"/>
</template>

<script setup>
  const isLoading = ref(false);
  const toggleLoader = () => {
    isLoading.value = !isLoading.value;
  };
</script>

Props

For ELoader component, the following props are available:

Prop	Type	Default	Note
teleport	Boolean	true	Enables vue teleport.
blurEffect	Boolean	true	Applies background blur.
loading	Boolean	false	It controls the active state of the loader.
customColor	String	-	A custom color in rgb format is applied to the btn (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.

Slots

The ELoader component provides a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.