Loading

A v-loading directive and programmatic showLoading() API for overlaying loading indicators on any element. Supports 4 spinner styles, custom text, background, and fullscreen mode.

Basic Directive

Add v-loading to any element. When true, the loading overlay appears.

<template>
  <div v-loading="isLoading">
    <p>Your content here</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isLoading = ref(false)

async function fetchData() {
  isLoading.value = true
  await api.getData()
  isLoading.value = false
}
</script>

With Text

Pass an object to customize the loading text.

<template>
  <div v-loading="{ text: 'Loading users...' }">
    <UserList />
  </div>
</template>

Spinner Styles

Four built-in spinners: ring (default), dots, pulse, bars.

ring

dots

pulse

bars

<template>
  <div v-loading="{ spinner: 'ring' }" />
  <div v-loading="{ spinner: 'dots' }" />
  <div v-loading="{ spinner: 'pulse' }" />
  <div v-loading="{ spinner: 'bars' }" />
</template>

Table Loading

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol White	carol@example.com	Viewer	Inactive
Dave Brown	dave@example.com	Editor	Active

<template>
  <div v-loading="{ text: 'Fetching records...', spinner: 'dots' }">
    <table>...</table>
  </div>
</template>

Card Loading

Click "Refresh" on any card to see v-loading in action, or load all at once.

Project Alpha

A modern web application with real-time data synchronization and team collaboration features. Built with Vue 3 and TypeScript.

Project Beta

Dashboard analytics platform for tracking user engagement metrics and generating automated reports for stakeholders.

Project Gamma

E-commerce storefront with inventory management, payment processing, and order fulfillment automation system.

<template>
  <div v-loading="isLoading" class="card">
    <img src="..." />
    <h3>Title</h3>
    <p>Description</p>
    <button @click="refresh">Refresh</button>
  </div>
</template>

Custom Background

<template>
  <div v-loading="{ background: 'rgba(0,0,0,0.7)' }">
    Content
  </div>
</template>

Fullscreen Loading

Use the programmatic showLoading() API for fullscreen overlays.

<script setup>
import { showLoading } from 'veloxui'

async function loadPage() {
  const { close } = showLoading({ text: 'Loading page...' })
  await fetchAllData()
  close()
}
</script>

Programmatic — Target Element

Target a specific element by CSS selector or DOM reference.

<script setup>
import { showLoading } from 'veloxui'

// By CSS selector
const { close } = showLoading({
  target: '#my-table',
  text: 'Updating...',
  spinner: 'bars',
})

// By DOM element
const el = document.querySelector('.card')
const loading = showLoading({ target: el })
loading.close()
</script>

Directive Options

Option	Type	Default	Description
text	string	—	Text below the spinner
spinner	'ring' | 'dots' | 'pulse' | 'bars'	'ring'	Spinner style
background	string	—	Custom overlay background
fullscreen	boolean	false	Cover the entire page
lock	boolean	false	Block pointer events

Usage Variants

<!-- Boolean -->
<div v-loading="isLoading" />

<!-- String shorthand (shows as text) -->
<div v-loading="'Loading...'" />

<!-- Options object -->
<div v-loading="isLoading ? { text: 'Wait...', spinner: 'dots' } : false" />

showLoading API

import { showLoading } from 'veloxui'

const { close } = showLoading(options?)

Option	Type	Default	Description
target	string | HTMLElement	—	Element to cover (fullscreen if omitted)
text	string	—	Text below spinner
spinner	'ring' | 'dots' | 'pulse' | 'bars'	'ring'	Spinner style
background	string	—	Custom overlay background