Loader API Reference

Props

Prop	Type	Default	Description
size	Number	40	Size of the loader in pixels
width	Number	4	Width of the loader stroke in pixels
variant	String	'default'	Applies themed colors for the overlay/backdrop and spinner
isLocalLoader	Boolean	true	If true, loader is positioned relative to its container; if false, it's fixed to the viewport
src	String	''	URL of a custom loader image to use instead of the default spinner

Slots

Slot	Description
default	Custom loader content to replace the default spinner or image

CSS Variables

The component uses the following CSS variables that can be overridden:

Variable	Default	Description
--loader-fill-color	#000	Color of the loader's filled part
--loader-empty-color	#e0e0e0	Color of the loader's empty/track part

Example Usage

Basic Usage

<template>
  <OLoader />
</template>

<script setup>
import { OLoader } from "your-component-library";
</script>

Custom Size

<template>
  <OLoader :size="60" :width="6" />
</template>

<script setup>
import { OLoader } from "your-component-library";
</script>

Custom Image Loader

<template>
  <OLoader src="/path/to/loader.gif" :size="48" />
</template>

<script setup>
import { OLoader } from "your-component-library";
</script>

Local Loader

<template>
  <div class="content-wrapper">
    <OLoader :isLocalLoader="true" :size="32" />
    <!-- Content here -->
  </div>
</template>

<script setup>
import { OLoader } from "your-component-library";
</script>

<style>
.content-wrapper {
  position: relative;
  min-height: 200px;
}
</style>

Custom Loader Content

<template>
  <OLoader>
    <div class="custom-loader">
      <span>Loading...</span>
      <div class="dots"><span>.</span><span>.</span><span>.</span></div>
    </div>
  </OLoader>
</template>

<script setup>
import { OLoader } from "your-component-library";
</script>

<style>
.custom-loader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dots span {
  animation: dots 1.5s infinite;
  animation-delay: calc(var(--i) * 0.2s);
}

@keyframes dots {
  0%,
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}
</style>