skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-progress

Render line, circle, multiple-circle, and dashboard progress indicators in Naive UI applications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Progress indicators communicate task status and loading state in Naive UI applications. The n-progress skill provides a versatile component to visualize operation progress across different forms.

Core Features & Use Cases

  • Supports line, circle, multiple-circle, and dashboard types for different layouts.
  • Includes status variants (default, info, success, warning, error) for clear operation feedback.
  • Highly customizable appearance: color, height, and border-radius, with gradient options.
  • Optional custom indicator content and a show-indicator toggle to tailor UI.
  • Use cases include loading bars during uploads, task progress in dashboards, and multi-scenario progress displays.

Quick Start

Create an n-progress line and set its percentage to a value to visualize progress.

Frequently Asked Questions about n-progress

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

FAQPage Schema
How do I show task progress and loading states in a Naive UI dashboard?▼

To show task progress in a Naive UI dashboard, render line, circle, multiple-circle, or dashboard indicators to visualize operation progress. These components display loading states across long-running tasks with customizable color and size.

What types of progress indicators can I use for loading bars and circular progress displays?▼

Available progress indicators include line, circle, multiple-circle, and dashboard types. These formats accommodate horizontal loading bars and circular progress displays across various loading states and dashboard layouts.

How do I customize the color and appearance of progress indicators in Naive UI?▼

Customize progress indicators by adjusting color, height, and border-radius, alongside gradient options. You can also toggle indicator visibility and inject custom indicator content to tailor the UI.

Can I display multiple concurrent progress statuses for long-running tasks?▼

Yes, display multiple concurrent statuses using the multiple-circle type and various status variants. Status options include default, info, success, warning, and error for clear operation feedback.

Does the n-progress component support custom indicator content?▼

Yes, the n-progress component supports optional custom indicator content and a show-indicator toggle. This allows you to tailor the UI by hiding or replacing default indicators within your progress displays.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
AcosmiAcosmi
6

report-progress

Report phase and completion percent for long-running tasks asynchronously.

Community
Intermediate
jiaiyanjiaiyan
8

n-alert

Display contextual alert messages with lifecycle management for Naive UI in Vue 3.

Community
Intermediate
prateekprateek

hig-components-status

Guide determinate and indeterminate progress indicator selection per Apple HIG.

Community
Intermediate