n-loading-bar

Name: n-loading-bar
Availability: InStock
Author: jiaiyan

Provide visual loading indicators for asynchronous operations in Naive UI apps.

8|3|Updated Mar 13, 2026

Search Tags:#ui #async #progress #provider #loading #naive-ui

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-loading-bar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-loading-bar
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-loading-bar
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-loading-bar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers show loading progress for asynchronous operations in Naive UI apps, reducing user uncertainty during navigation or data fetches.

Core Features & Use Cases

Global Provider: Wrap app with LoadingBarProvider
Injection API: Use useLoadingBar hook in components
Multiple States: Support start, finish, and error states
Custom Styling: Configure loading bar style
Local Mounting: Mount to specific container

Quick Start

Wrap your app with n-loading-bar-provider and use the useLoadingBar hook to start and finish loading states.

Frequently Asked Questions about n-loading-bar

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

FAQPage Schema

How do I show loading progress for asynchronous operations in Naive UI?▼

To show loading progress for asynchronous operations in Naive UI, you can use a global LoadingBarProvider to wrap your app and a composable hook to control start, finish, and error states during API calls or route transitions.

Can I display a loading bar for route transitions in Naive UI?▼

Yes, you can display a loading bar for route transitions in Naive UI by implementing a global provider that triggers the loading state when navigation starts and finishes when the route resolves.

How do I customize the loading bar style in Naive UI?▼

You can customize the loading bar style in Naive UI using the configuration options provided by the loading bar provider, allowing you to adjust the visual appearance of the progress indicator.

Does Naive UI support mounting a loading indicator to a specific container?▼

Yes, Naive UI supports mounting a loading indicator locally to a specific container instead of globally, allowing you to scope the visual loading progress to individual components.

What is the best way to manage app-wide loading states for API calls in Naive UI?▼

The best way to manage app-wide loading states for API calls in Naive UI is using a global LoadingBarProvider combined with an injection API hook to start and finish the loading bar during data fetches.