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.
Dot Mode
Inspired by excellent component libraries' 4-dot rotation mode, with more dynamic and rhythmic visuals.
Premium Animations
In addition to the basic circle animation, YhSpin also provides various premium SVG animations to meet different visual aesthetic needs.
Description Text and Layout
Supports adding description text with horizontal or vertical layout.
Color Customization
Supports custom colors, and can even pass CSS gradient values for more advanced visual effects.
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.
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.
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.
Data Dashboard
This is content wrapped by Spin. Toggle the button below to control the loading state visibility.
When loading is enabled, the content area will automatically apply Gaussian blur filter and show loading animation.
Custom Slots
The tip slot allows complete customization of the description text area content.
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.
SSR Rendering
Spin component does not render Spinner animation during SSR until client-side hydration is complete, ensuring it does not affect first-screen parsing performance.
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> | - |
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 (CSS 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 | - |