Vue Component Library

Appearance

Loader Component ​

A versatile loading indicator that supports a built-in spinner, custom imagery, and local or full-screen presentation using variants for consistent styling.

Overview ​

The Loader component provides:

  • Smooth, animated circular spinner
  • Drop-in support for custom loader imagery
  • Local (relative) or full-screen positioning
  • Variant-based appearance controls
  • Accessible loading states

When to Use ​

Use the Loader component when you need to:

  • Show loading states during data fetching or processing
  • Indicate background operations
  • Provide visual feedback for async operations
  • Create custom loading experiences
  • Maintain consistent loading UI across your application

Key Features ​

  • Spinner or Image: Use the default SVG loader or swap in a custom image via src.
  • Variants: Apply library variants (e.g. default, success) for consistent overlay colors.
  • Size & Stroke Control: Adjust size and width to fit dense cards or large modals.
  • Flexible Positioning: Toggle isLocalLoader for container-relative loaders or full-screen overlays.
  • Custom Content Slot: Replace the spinner entirely via the default slot.
  • Accessible Animation: Smooth, infinite rotation with pointer-blocking overlays when global.

API Reference →

View Code →