Spin

Loading feedback for pages, cards, or local areas. YH-UI's Spin adopts a minimalist design, supporting standard SVG animations and providing a dynamic dot (Dot) mode.

Basic Usage

Provides standard SVG animation with multiple size options, and also supports passing explicit pixel values.

Size Options

Dot Mode

Inspired by excellent component libraries' 4-dot rotation mode, with more dynamic and rhythmic visuals.

Dot Mode

Premium Animations

In addition to the basic circle animation, YhSpin also provides various premium SVG animations to meet different visual aesthetic needs.

Animation Types

Description Text and Layout

Supports adding description text with horizontal or vertical layout.

Description Text

Color Customization

Supports custom colors, and can even pass CSS gradient values for more advanced visual effects.

Color Customization

Glass Mask Mode

The glass prop enables Gaussian blur mask effect for fullscreen or local areas, commonly used for state locking after important page operations.

Glass Mask

Delayed Display (Anti-flicker)

For some extremely fast requests (e.g., < 100ms), immediately showing loading animation may cause visual "flickering" discomfort. Use the delay prop to set delayed display time.

Delayed Display

Container Mode (Advanced Usage)

Spin can be used as a container component to wrap other content. When show is true, the container automatically enters loading state and applies Gaussian blur.

Container Mode

Custom Slots

The tip slot allows complete customization of the description text area content.

Slot Customization

Use in Nuxt

Spin is fully compatible with Nuxt 3/4 environments. In Nuxt projects, components are automatically imported, and you can easily implement fullscreen or local loading effects with async APIs like useFetch.

Nuxt Usage Example

SSR Rendering

Spin is SSR-safe because it renders regular markup from props and slots. The loading animation itself starts naturally on the client after hydration.

API

Props

Prop	Description	Type	Default
show	Whether to show loading state	boolean	true
tip	Description text	string	-
size	Size, supports keywords or custom px value	'small' | 'default' | 'large' | number	'default'
vertical	Whether to arrange icon and text vertically	boolean	false
delay	Delay display time (ms), anti-flicker	number	0
glass	Whether to enable fullscreen glass mask mode	boolean	false
dot	Whether to use dot animation	boolean	false
type	Loading animation style type. Options: circle, chaser, gear, dual-ring, rect	LoadingSpinnerType	'circle'
color	Custom color (supports hex, RGB, CSS gradient string or gradient config object)	string | string[] | Record<string, string>	undefined
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Events

Event Name	Description	Parameters
show	Triggered when loading state shows	-
hide	Triggered when loading state hides	-

Slots

Slot Name	Description
default	Wrapped content. If this slot exists, Spin runs in container mode
tip	Custom description text area

Expose

Name	Description	Type
visible	Whether the animation is currently visible	ComputedRef<boolean>

Theme Variables

The component supports customization via the following variables:

Variable	Description	Default
--yh-spin-color	Base color of loading icon	var(--yh-color-primary)
--yh-spin-blur-radius	Blur radius in container mode	8px
--yh-spin-mask-bg	Mask background in container mode	rgba(255, 255, 255, 0.4)
--yh-spin-mask-bg-dark	Mask background in dark mode	rgba(0, 0, 0, 0.3)
--yh-spin-gradient	CSS background value in gradient mode	undefined

Type Exports

Name	Description
YhSpinProps	Component props type
YhSpinEmits	Component emits type
YhSpinSlots	Component slots type
YhSpinExpose	Component expose type
YhLoadingSpinnerType	Built-in loading animation union type
YhSpinInstance	Component instance type