Logobaseui-cn

Progress

Displays an indicator showing the completion progress of a task.

Newdisplayfeedback
Loading preview...

Installation

npx baseui-cn add progress

Usage

import {
  Progress,
  ProgressTrack,
  ProgressIndicator,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
<Progress value={65}>
  <ProgressLabel>Uploading</ProgressLabel>
  <ProgressValue />
</Progress>

Examples

Basic

A simple progress bar.

Loading preview...

With label and value

Show label and percentage.

Loading preview...

Indeterminate

Omit value for an indeterminate state.

Loading preview...

API Reference

See the Base UI Progress documentation for the full API reference, including all props, data attributes, and CSS classes.