Progress

The Progress component displays a progress indicator for tasks, uploads, or any operation with a completion percentage.

Installation

npm install @nqlib/nqui

Import

import { Progress } from '@nqlib/nqui';

Basic Usage

import { Progress } from '@nqlib/nqui';

export default function Example() {
  return <Progress value={33} />;
}

Examples

Progress Styles

Dash (block-based) vs solid bar

Dash style (default)

Solid style

Loading preview…

example.tsx

'use client';import { Progress } from '@nqlib/nqui';export default function Example() {  return (    <div className="space-y-6">      <div className="space-y-2">        <p className="text-sm font-medium">Dash style (default)</p>        <Progress value={60} variant="success" style="dash" />      </div>      <div className="space-y-2">        <p className="text-sm font-medium">Solid style</p>        <Progress value={60} variant="success" style="solid" />      </div>    </div>  );}

Basic Progress

With tooltip (hover to see value)

Animated Progress

Styles (dash vs solid)

Dash

Solid

Variants

Default

Neutral

Success

Warning

Error

The With tooltip example wraps the progress bar in a Tooltip so hovering shows the current value (e.g. 75%). This uses the same Tooltip / TooltipProvider pattern as the Tooltip component.

Props

Prop	Type	Default	Description
`value`	`number`	-	Progress value (0-100)
`max`	`number`	`100`	Maximum value
`style`	`"dash" \| "solid"`	`"dash"`	`dash` = block-based segmented; `solid` = smooth continuous bar
`variant`	`"default" \| "neutral" \| "success" \| "warning" \| "error"`	`"default"`	Color variant
`blocks`	`number`	auto	Number of blocks (dash style only, 20-100)
`showTooltip`	`boolean`	`false`	Show percentage tooltip on hover
`showAnimation`	`boolean`	`false`	Animate value changes
`label`	`string`	-	Label text next to bar (solid style only)
`height`	`string`	`h-8` (dash) / `h-2` (solid)	Tailwind class or CSS value
`className`	`string`	-	Additional CSS classes

Accessibility

ARIA attributes for screen readers
Proper progress semantics

Next Steps

Learn about Spinner for loading indicators
Explore Feedback Components for other feedback elements