Progress

Overview

Use Progress to show how far a task has advanced.

Progress is useful for uploads, imports, onboarding steps, generation, installation, and long-running actions. Use Meter for static values like quota or capacity.

Anatomy

A progress indicator has a value, maximum, optional label, optional formatted value, and visual bar.

Behavior

Use determinate progress when you know the percentage. Use a separate loading pattern when the duration is unknown.

Accessibility

Show text when the value matters. Do not communicate progress only through animation or color.

Installation

npx love-ui@latest add progress

Usage

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

<Progress value={40} />

Note: If you render children inside Progress, you must also include ProgressTrack and ProgressIndicator inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.

Examples

The examples show progress with labels and formatted values.

With Label and Value

With Formatted Value