n-spin

Display loading indicators and overlays for Naive UI spin components.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-spin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: n-spin
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-spin
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-spin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Spin component provides a reusable, built-in loading indicator to visually communicate processing states and protect user interactions during asynchronous operations.

Core Features & Use Cases

  • Loading overlay: Wrap content or entire pages to display a spinner with optional description.
  • Size and customization: Support for small, medium, large sizes and customizable stroke, color, and rotation.
  • Slots and descriptions: Optional icon and description slots to tailor the visual messaging; works with various Naive UI components.
  • Common usage patterns: Data fetch, form submissions, and full-page loading scenarios to improve UX during latency.

Quick Start

Wrap your content with the n-spin component to show a loading indicator while an asynchronous operation runs.

Frequently Asked Questions about n-spin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I show a loading indicator in Vue3 during data fetch?

To show a loading indicator during data fetch in Vue3, wrap your content with a spin component to visually communicate processing states and protect user interactions during asynchronous operations.

Can I customize the spinner size and description for a Vue3 loading overlay?

Yes, you can customize the loading overlay by configuring props like size, description, and delay, while using optional slots for icon and description to tailor the visual messaging.

How does a loading overlay protect user interactions during form submissions?

A loading overlay protects user interactions during form submissions by visually communicating the processing state and preventing further input until the asynchronous operation completes.

What is the best way to display a full-page loading spinner in Naive UI?

The best way to display a full-page loading spinner in Naive UI is to wrap the entire page content with a spin component, configuring the show and size props to manage its visibility and scale.

Does the Naive UI spin component support delayed loading indicators?

Yes, the Naive UI spin component supports delayed loading indicators by configuring the delay prop, which prevents flickering during quick asynchronous operations.

Are there limitations when wrapping content with a loading overlay in Vue3?

Limitations when wrapping content with a loading overlay in Vue3 include ensuring the wrapped components render correctly beneath the overlay and managing the timing of the asynchronous operation.