Loading

Provides a wrapper Loading component and a convenient v-loading custom directive to lock interactions during heavy tasks, displaying a bold bordered loading indicator and themed text.

Preview

Preview

声明式容器加载 Loading

订单支付明细

应付金额：¥ 199.00

支付状态：待付

指令式加载 v-loading

Installation

pnpm dlx brutx-vue@latest add loading

Usage

Declarative Wrapper Usage

Wrap around the block element that needs a loading overlay. Control the active state via the loading prop, and customize the description via the text prop.

<script setup>
import { ref } from 'vue'
import { Loading } from 'brutx-ui-vue'

const loading = ref(true)
</script>

<template>
    <Loading :loading="loading" text="Fetching core data...">
        <div class="card">
            <h4>Account Details</h4>
            <p>Withdrawable Balance: $ 1500.00</p>
        </div>
    </Loading>
</template>

Directive Usage

Mount the v-loading directive directly onto standard HTML elements. Customize the text by applying the v-loading-text attribute.

<script setup>
import { ref } from 'vue'

const isDataLoading = ref(true)
</script>

<template>
    <div v-loading="isDataLoading" v-loading-text="'Parsing database...'">
        <p>Today's orders: 1,250</p>
        <p>Delivery rate: 98.5%</p>
    </div>
</template>

API Reference

Loading — Props

Name	Type	Default	Description
loading	boolean | undefined	false	Controls the loading state. The local overlay or page-level loading content is shown only when true.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/loading/Loading.vue Resolved value false Source Loading.vue:9 packages/ui/src/components/loading/Loading.vue
text	string | undefined	undefined	Sets optional custom text in the local loading overlay. The text area is omitted when the value is empty.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/loading/Loading.vue Resolved value undefined Source Loading.vue:10 packages/ui/src/components/loading/Loading.vue
background	string | undefined	undefined	Sets the local loading overlay background color; the component’s translucent theme background is used when omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/loading/Loading.vue Resolved value undefined Source Loading.vue:11 packages/ui/src/components/loading/Loading.vue
customClass	string | undefined	undefined	Additional CSS classes applied to the local loading overlay.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/loading/Loading.vue Resolved value undefined Source Loading.vue:12 packages/ui/src/components/loading/Loading.vue
page	boolean | undefined	false	Switches to the page-level loading layout, which occupies at least the viewport height while loading.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/loading/Loading.vue Resolved value false Source Loading.vue:13 packages/ui/src/components/loading/Loading.vue
fullscreen	boolean | undefined	false	Shows a fixed full-viewport loading view, even when the component is nested inside a regular container.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/loading/Loading.vue Resolved value false Source Loading.vue:14 packages/ui/src/components/loading/Loading.vue
title	string | undefined	undefined	Sets the heading in the page-level loading card.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/loading/Loading.vue Resolved value undefined Source Loading.vue:15 packages/ui/src/components/loading/Loading.vue
description	string | undefined	undefined	Sets the description in the page-level loading card.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/loading/Loading.vue Resolved value undefined Source Loading.vue:16 packages/ui/src/components/loading/Loading.vue
progress	number | undefined	undefined	Provides loading progress from 0 to 100. A progress bar appears when set, and out-of-range values are clamped.
Details Declared type number | undefined Default value details Declaration undefined Source: packages/ui/src/components/loading/Loading.vue Resolved value undefined Source Loading.vue:17 packages/ui/src/components/loading/Loading.vue
class	string | undefined	undefined	Additional CSS classes applied to the page-level root or local loading container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/loading/Loading.vue Resolved value undefined Source Loading.vue:18 packages/ui/src/components/loading/Loading.vue

Loading — Slots

Name	Signature or type	Description
#header	{}	Custom header content placed before the title card in the page-level loading layout.
Details Declared type {} Source Loading.vue packages/ui/src/components/loading/Loading.vue
#default	{}	The main content of the page-level loading card.
Details Declared type {} Source Loading.vue packages/ui/src/components/loading/Loading.vue
#footer	{}	Custom content at the bottom of the page-level loading card, rendered after the progress bar.
Details Declared type {} Source Loading.vue packages/ui/src/components/loading/Loading.vue

Accessibility

• Pointer Events: The overlay has pointer-events-none on the loader spinner itself but locks inputs to child items to prevent double-submits.
• Position Hijack: Safely upgrades host positioning to relative during loading (reverting back on unmount) to prevent leakage of absolute loaders.