Loader Component

The Loader component provides a full-screen overlay with an animated spinning loader, perfect for indicating loading states in your Vue.js application.

Props

Prop Name	Type	Default	Description
show	boolean	false	Controls the visibility of the loader overlay.

Slots

This component does not provide any slots.

Emits

This component does not emit any events.

Usage Example

<template>
  <div>
    <!-- Your main content -->
    <button @click="startLoading">Load Data</button>
    
    <!-- Loader component -->
    <Loader :show="isLoading" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Loader from './components/Loader.vue'

const isLoading = ref(false)

const startLoading = () => {
  isLoading.value = true
  
  // Simulate async operation
  setTimeout(() => {
    isLoading.value = false
  }, 3000)
}
</script>

Visual Design

The loader features:

• Full-screen overlay: Semi-transparent dark background
• Centered spinner
• High z-index: z-9999 ensures it appears above other content

Notes

• The loader automatically centers itself on the screen when shown
• The overlay prevents user interaction with underlying content
• The show prop reactively controls visibility without re-rendering the entire component