PxLoader

A unified loading indicator component that supports both inline/lazy-loading scenarios and full-screen blocking overlays.

Usage

<script setup lang="ts">
import { PxLoader } from 'praxis-vue-ui'
</script>

Inline / Lazy Loading (Default)

Used to indicate content that is currently being fetched or rendered inside a specific area.

Inline Loader

Fetching module data...

<PxLoader message="Fetching module data..." />

Fullscreen Overlay

Used to block the entire screen during critical asynchronous operations, like saving a form or processing a payment. Features a beautiful blur backdrop and an animated premium spinner.

Fullscreen Overlay Loader

<script setup lang="ts">
import { ref } from 'vue'
import { PxLoader } from 'praxis-vue-ui'

const isLoading = ref(false)
const showLoader = () => {
  isLoading.value = true
  setTimeout(() => isLoading.value = false, 2000)
}
</script>

<template>
  <button @click="showLoader">
    Trigger Fullscreen Loader
  </button>
  <PxLoader 
    v-if="isLoading" 
    fullscreen 
    message="Processing payment..." 
    subMessage="Please do not close this window."
  />
</template>

API Reference

Prop	Type	Default	Description
fullscreen	boolean	false	If true, the loader will overlay the entire screen with a backdrop blur
message	string	'Loading...'	The main text to display below the spinner
subMessage	string	'Please wait while we process your request.'	Additional subtext, mostly used in fullscreen mode