Loading

Директива v-loading и программный API showLoading() для наложения индикаторов загрузки на любой элемент. Поддерживает 4 стиля спиннера, произвольный текст, фон и полноэкранный режим.

Basic Directive

Добавьте v-loading к любому элементу. Когда значение true, появляется оверлей загрузки.

<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

Передайте объект, чтобы задать текст загрузки.

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

Spinner Styles

Четыре встроенных спиннера: ring (по умолчанию), 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

Нажмите «Refresh» на любой карточке, чтобы увидеть v-loading в действии, или загрузите все сразу.

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

Используйте программный API showLoading() для полноэкранных оверлеев.

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

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

Programmatic — Target Element

Укажите конкретный элемент по CSS-селектору или ссылке на DOM.

<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	—	Текст под спиннером
spinner	'ring' | 'dots' | 'pulse' | 'bars'	'ring'	Стиль спиннера
background	string	—	Кастомный фон оверлея
fullscreen	boolean	false	Покрыть всю страницу
lock	boolean	false	Блокировать события указателя

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	—	Элемент для наложения (полноэкранно, если не указан)
text	string	—	Текст под спиннером
spinner	'ring' | 'dots' | 'pulse' | 'bars'	'ring'	Стиль спиннера
background	string	—	Кастомный фон оверлея