NexoreUI
InstallationComponentsNexore MakeGitHub
GitHub
NexoreUIv0.1.2

Getting Started

Installation

Components

ButtonInputCardBadgeAlertAvatarAccordionModal / DialogTooltipTabsProgressSkeletonSliderSwitchRatingCommandTableStepperScroll AreaFile UploadNavigationIconsDock

Pro

ChartsData DisplayDark Mode ToolkitCommerceCookie ConsentSocialPremium EffectsLoaders

Animated

MarqueeNumber TickerAnimated NumberTyping AnimationBlur FadeBox RevealFile Preview CardImage Compare
MIT License
DocsProgress

Progress

Progress bars and indicators.

Next ComponentSkeleton

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

Progress Playground
nexoreui
Live Preview
Props Panel
number

Current progress percentage value (0-100)

text

Additional CSS classes for custom styling

Generated Code
Open in GitHub
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.