🌏 Translated with the assistance of DeepSeek and ChatGPT

Loading Spin

Loading...

Basic Usage

Wrap the content to be loaded with the Spin component. The loading property sets the loading state.

Good programmers are always learning. They read books, attend conferences, and talk to others. They experiment with new languages and tools, constantly trying to write better code. Studying classic problems teaches how to break them down and balance trade-offs—time versus space, simplicity versus efficiency. Reading others' code reveals structure, naming, and commenting habits. Learning never stops; every line is a chance to improve.

Hide source code

Standalone Usage

When used alone, only the loading icon is displayed.

Hide source code

Icon Size

Icons come in different sizes.

Hide source code

Change Icon

Use the icon slot to change the icon.

Hide source code

Add Description

Use the description slot to add a loading description.

The most important part of writing a program is not deciding what data structures to use or what algorithms to implement. It is understanding the problem. Once you really understand the problem, the right data structures and algorithms often become obvious. The hard part is getting to that point—seeing past the surface and figuring out what the program really needs to do.

Coming Soooooooooooon...

Hide source code

API

SpinProps

Attribute	Type	Optional	Default	Description	Version
loading	boolean	True		Loading state. Defaults to true when Spin is used alone, and false when wrapping content.	0.0.2
size	'medium' | 'large' | 'small' | number	True	'medium'	Icon size.	0.0.2
maskProps	Omit<MaskProps, 'zIndex'> & RestAttrs	True		Properties of mask.	0.0.3
zIndex	number	True	20	z-index of the overlay when wrapping content.	0.0.2
maskColor	string	True		Deprecated Mask component color.	0.0.2
maskStep	number	True	1	Deprecated Grid spacing of the Mask component.	0.0.2
maskLineWidth	number	True	2	Deprecated Line width of the Mask component.	0.0.2
maskGrid	boolean	True	true	Deprecated Whether the Mask component has a grid background.	0.0.2

SpinSlots

Slot	Parameter	Description	Version
default		Content wrapped by Spin.	0.0.2
icon		Icon for Spin.	0.0.2
description		Description during Spin loading.	0.0.2

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}