Source

Command Palette

Search for a command to run...

Progress

Displays completion progress of a task with visual indicator.

About Progress

A visual progress indicator showing task completion as a filled bar. Supports determinate states with percentage values and indeterminate states for unknown duration. Includes optional labels and multiple color variants for different states.

Installation

Import the Progress component from LSD:
import { Progress } from '@nipsys/lsd'

export default function MyComponent() {
  return <Progress />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
Colors

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Indeterminate

Paused

API Reference

Progress

value
Completion percentage. Number between 0 and 100 representing progress.
Type: number
indeterminate
Enables indeterminate loading state. Shows animated bar when true, uses value when false.
Type: boolean
speed
Indeterminate animation speed. Controls how fast the indeterminate bar animates.
Type: "slow" | "normal" | "fast"
variant
Visual color variant. Semantic colors indicating different progress states.
Type: "default" | "success" | "warning" | "destructive"
showLabel
Displays percentage label. Shows current value as percentage text when true.
Type: boolean
labelPosition
Label position relative to bar. Controls where the percentage text appears.
Type: "top" | "bottom"
paused
Pauses indeterminate animation. Freezes animation when true, only affects indeterminate state.
Type: boolean
size
Bar height. Controls the visual size of the progress bar.
Type: "sm" | "md" | "lg"

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Progress is a non-interactive element and does not support keyboard navigation.
ARIA Attributes
Proper ARIA attributes for screen readers
• role="progressbar" is automatically applied to indicate progress• aria-valuenow is automatically set to current value when determinate• aria-valuemin is automatically set to 0• aria-valuemax is automatically set to 100
Focus States
Visible focus indicators for keyboard users
• Progress indicators are not focusable as they are non-interactive display elements.
Sonner