Loading

Istalgan elementga yuklanish indikatorlarini qo'yish uchun v-loading direktivasi va dasturiy showLoading() API'si. 4 ta spinner uslubini, o'zgartirilgan matn, fon va to'liq ekran rejimini qo'llab-quvvatlaydi.

Basic Directive

v-loading'ni istalgan elementga qo'shing. true bo'lganda yuklanish overlay'i paydo bo'ladi.

<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

Yuklanish matnini sozlash uchun obyektni uzating.

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

Spinner Styles

To'rtta o'rnatilgan spinner: ring (standart), 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

v-loading'ni ko'rish uchun istalgan kartadagi "Refresh"'ni bosing yoki barchasini birdan yuklang.

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

To'liq ekranli overlay'lar uchun dasturiy showLoading() API'sidan foydalaning.

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

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

Programmatic — Target Element

CSS selektor yoki DOM havolasi orqali ma'lum bir elementni nishonga oling.

<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 ostidagi matn
spinner	'ring' | 'dots' | 'pulse' | 'bars'	'ring'	Spinner uslubi
background	string	—	O'zgartirilgan overlay foni
fullscreen	boolean	false	Butun sahifani qoplash
lock	boolean	false	Kursor hodisalarini bloklash

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	—	Qoplashga mo'ljallangan element (ko'rsatilmasa, to'liq ekran)
text	string	—	Spinner ostidagi matn
spinner	'ring' | 'dots' | 'pulse' | 'bars'	'ring'	Spinner uslubi
background	string	—	O'zgartirilgan overlay foni