Appearance

Overlay Loader Component ​

File Information ​

  • Path: components/theme/global/OverlayLoader.vue
  • Purpose: Full-screen loading overlay with spinner animation
  • Type: Global Theme Component

Overview ​

The Overlay Loader component provides a full-screen loading overlay with an animated spinner icon and customizable loading text. It's used to indicate that an operation is in progress and blocks user interaction.

Key Features ​

  1. Full-Screen Overlay

    • Covers entire viewport
    • Blocks user interaction
    • Semi-transparent background

  2. Animated Spinner

    • SVG-based refresh icon
    • CSS animation (spin)
    • Smooth rotation

  3. Customizable Text

    • Configurable loading message
    • Default: "Loading..."
    • Centered display

Props ​

isActive ​

  • Type: Boolean
  • Default: false
  • Required: No
  • Description: Controls visibility of the loader overlay

loadingText ​

  • Type: String
  • Default: 'Loading...'
  • Required: No
  • Description: Text displayed below the spinner

Template Structure ​

vue
<template>
  <div v-if="isActive" class="overlayLoader">
    <svg class="refresh-icon fa-spin">
      <!-- Spinner SVG -->
    </svg>
    {{ loadingText }}
  </div>
</template>

Styling ​

Uses CSS classes:

  • .overlayLoader - Main overlay container
  • .refresh-icon - Spinner icon
  • .fa-spin - Spin animation class
  • .fill-white - White fill color
  • .fill-color - Theme color fill

Usage Examples ​

Basic Usage ​

vue
<template>
  <div>
    <OverlayLoader :isActive="loading" />
    <!-- Page content -->
  </div>
</template>

<script>
import OverlayLoader from '~/components/theme/global/OverlayLoader.vue'

export default {
  components: {
    OverlayLoader
  },
  data() {
    return {
      loading: false
    }
  }
}
</script>

With Custom Text ​

vue
<template>
  <OverlayLoader 
    :isActive="isUploading" 
    loadingText="Uploading files..."
  />
</template>

Conditional Loading ​

vue
<template>
  <div>
    <OverlayLoader 
      :isActive="fetchingData || uploadingFiles" 
      :loadingText="loadingMessage"
    />
    <!-- Content -->
  </div>
</template>

<script>
export default {
  computed: {
    loadingMessage() {
      if (this.fetchingData) return 'Loading data...'
      if (this.uploadingFiles) return 'Uploading files...'
      return 'Loading...'
    }
  }
}
</script>

Integration Points ​

  • Pages: Used in pages with async operations
  • Components: Used in components with loading states
  • API Calls: Shows during API requests
  • File Uploads: Shows during upload operations

Notes for Development ​

  • Blocks all user interaction when active
  • Full-screen overlay
  • Smooth animation
  • Customizable text
  • Lightweight component