║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Progress description: Displays the status of a task that takes a long time. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-base-progress" />

Installation

<ComponentInstallation name="components-base-progress" />

Usage

<Progress>
  <ProgressLabel>Export data</ProgressLabel>
  <ProgressValue />
  <ProgressTrack />
</Progress>

API Reference

Progress

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/progress#progress" text="Animate UI API Reference - Progress Primitive" />

<ExternalLink href="https://base-ui.com/react/components/progress#root" text="Base UI API Reference - Progress.Root" />

</div>

ProgressLabel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/progress#progresslabel" text="Animate UI API Reference - Progress Label Primitive" />

<ExternalLink href="https://base-ui.com/react/components/progress#label" text="Base UI API Reference - Progress.Label" />

</div>

ProgressValue

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/progress#progressvalue" text="Animate UI API Reference - Progress Value Primitive" />

<ExternalLink href="https://base-ui.com/react/components/progress#value" text="Base UI API Reference - Progress.Value" />

<ExternalLink href="https://animate-ui.com/docs/primitives/texts/counting-number" text="Animate UI API Reference - CountingNumber" />

</div>

<TypeTable type={{ transition: { description: 'The transition of the progress value.', type: 'SpringOptions', required: false, default: '{ stiffness: 80, damping: 20 }', }, }} />

<Callout type="info"> The `render` property is not supported in the `ProgressValue` component, as it is used for animation. </Callout>

ProgressTrack

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/progress#progresstrack" text="Animate UI API Reference - Progress Track Primitive" />

<ExternalLink href="https://base-ui.com/react/components/progress#track" text="Base UI API Reference - Progress.Track" />

</div>

Credits

• Base UI Progress
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║