NexoreUIv1.8.6
InstallationComponents61IconsTemplatesNEWNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
61 comps
Create Project
Studio
Installation
Components Overview
60+
Icons
300+
Categories6 groups
Button
Input
Checkbox
AI
Select
AI
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Aurora Border Card
AI
Aurora Search Pill
AI
AI Prompt Input
AI
Command
Interactive Code Block
AI
Pro AI
AI
Theme: cyan
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
1

Indeterminate Progress

component.tsx
1

Progress Ring

65%
component.tsx
1

Circular Progress Card

75%
Progress
component.tsx
1

Multi-step Progress

CartShippingPayment
component.tsx
1
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.