NexoreUIv1.4
InstallationComponents41IconsNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
41 comps
Create Project
Studio
Installation
Components Overview
40+
Icons
300+
Categories6 groups
Button
Input
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Thinking Indicator
AI
Tool Call Card
AI
Agent Status Pill
AI
Command
Theme: indigo
Studio
DocsProgress

Progress

Progress bars and indicators.

NextSkeleton
On This Page
Quick Actions
Project Studio
New
Nexore Make (AI)Source on GitHub

Progress

Indicators for loading, loading stages, and task completion status.

When to use

determinate progressKnown task duration (file downloads, data processing, setup installers)
indeterminate progressUnknown task duration (connecting to network database, uploading assets)
progress ringCircular widgets in dash boards representing scores, CPU loads, or stats values

Interactive Playground

Live CanvasInteractive
Controls(2)
value
number

Current progress percentage value (0-100)

className
text

Additional CSS classes for custom styling

Generated JSX
Source
import { Progress } from "nexoreui"

<Progress />

Default Progress

component.tsx

Indeterminate Progress

component.tsx

Progress Ring

65%
component.tsx

Circular Progress Card

75%
Progress
component.tsx

Multi-step Progress

CartShippingPayment
component.tsx
Page 1 of 3

API Reference (Props)

PropTypeDefaultDescription
valuenumber0The progress value percentage from 0 to 100.
isIndeterminatebooleanfalseEnables infinite loading marquee animation.
progressLabelstring"Loading..."Visual text label shown during loading states.
classNamestring—Additional custom class names.

♿ Accessibility (a11y)

  • Progress Role: Automatically maps role="progressbar".
  • Range Attributes: Renders aria-valuenow, aria-valuemin="0", and aria-valuemax="100" representing loading scale attributes natively.