Loading

A mask layer displayed when loading data. Features flagship acrylic visual effects and perfectly adapts to Nuxt 3/4.

Relationship between Loading and Spin

Loading is the directive and service encapsulation provided by YH-UI, while Spin is its core UI component.

• Underlying Core (Spin): Responsible for the visual presentation and text arrangement of loading animations (SVG/Dot/Chaser/Gear). It is a pure Vue component.
• High-level Encapsulation (Loading): An enhanced solution built on Spin, providing directives and command-style services, specifically for handling full-screen masks, scroll locking, dynamic mounting, etc.

Usage

Regional Loading (Directive Version)

Use the v-yh-loading directive to quickly cover a host element with a loading mask.

This is container content

Basic Usage

Advanced Directive Usage

Through modifiers .fullscreen, .lock, .glass, and extension attributes yh-loading-*, more complex loading interactions can be achieved.

Directive Fullscreen and Locking

This is a dark container background

Directive Extension Attributes

System Core Dashboard

Rendering real-time data stream through acrylic glass filter...

Directive Flagship Glass Mode

Asset Management Queue

Dot loading mode for lightweight container feedback

Directive Dot Mode

Deep Customization

Applying special filter via my-custom-mask class...

Directive Custom Class Name

Composition API (Recommended)

Using YhLoading.service in script setup is the most efficient way to call it.

Composition API Call

Options API

In non-setup environments, you can call it via $loading on the prototype.

Options API Call

Usage in Axios

In actual projects, by combining Axios interceptors with a "reference counting" solution, Loading states for multiple concurrent requests can be handled perfectly, ensuring smooth loading effects.

This counter strategy ensures: only the first request opens Loading, and it is not closed until the last concurrent request completes, effectively preventing interface flickering.

Network Request Interception Example

Flagship Loading Styles

Inspired by the dynamic designs of loading.io.

Premium Animations

Custom Color Schemes

Supports single colors, gradient color arrays, or CSS variables.

Multi-color Animations

Fully Custom Expansion (VNode/Component)

YH-UI allows skipping built-in styles and injecting any Vue component or VNode through the spinner property for complete autonomous control over Loading content.

Custom VNode Demo

Application Context

Now Loading accepts a context as the second parameter of the message constructor, allowing you to inject the current application context into Loading, which will allow it to inherit all properties of the application.

TIP

If you register the YhLoading component globally, it will automatically inherit the application context.

By passing appContext, components mounted inside Loading can access globally registered plugins (like Pinia, Router) and global components.

Application Context Injection

API

LoadingOptions (Service Config)

| Prop | Description | Type | Default | | ----------- | -------------------------------------------------------------------------------- | -------------------- | ------------ | --------------- | --- | | target | Mounting target. Supports DOM or CSS selector | string | HTMLElement | document.body | | body | Whether to insert mask into body element (same as target: body) | boolean | false | | fullscreen | Whether full screen (position: fixed) | boolean | true | | lock | Whether to lock host element scrolling | boolean | false | | text | Loading text | string | - | | glass | Whether to enable flagship mode (acrylic glass effect) | boolean | false | | background | Mask layer background color | string | - | | customClass | Custom mask layer class name | string | - | | spinner | Custom icon/component (takes precedence over spinnerType) | string | Component | VNode | - | | spinnerType | Loading animation type. Options: circle, chaser, gear, dual-ring, rect | LoadingSpinnerType | circle | | color | Loading icon color, supports gradient color arrays or CSS variables | string | string[] | object | - | | dot | Whether to use dot loading style (Antd style) | boolean | false |

Directive Attributes (v-yh-loading)

Name	Description	Type
yh-loading-text	Loading text	string
yh-loading-background	Mask background color	string
yh-loading-custom-class	Custom class name	string
yh-loading-glass	Whether to enable acrylic effect	boolean
yh-loading-dot	Whether to use dot mode	boolean
yh-loading-color	Icon color	string
yh-loading-type	Animation type (circle, chaser, etc.)	LoadingSpinnerType

Directive Modifiers

Name	Description
.fullscreen	Equivalent to fullscreen: true
.lock	Equivalent to lock: true
.glass	Equivalent to glass: true

LoadingInstance (Service Instance Methods)

Prop	Description	Type
service	Create and show loading mask	(options: LoadingOptions, appContext?: AppContext) => LoadingInstance
close	Close and destroy mask instance	() => void
visible	(Readonly) Get current mask visibility status	boolean

Slots (Available when injected via spinner property)

When using <yh-spin> or referencing the component alone, the following slots are supported:

• default: Mask host content
• tip: Custom text content
• icon: Replace built-in loading icon

Theme Variables (CSS Variables)

Variable	Description	Default
--yh-bg-color-overlay	Base mask background color	rgba(255, 255, 255, 0.7)
--yh-spin-blur-radius	Acrylic blur radius	20px
--yh-loading-z-index	Mask z-index	2000