Progress

Display progress indicators for ongoing operations and tasks.

Basic

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={60} />
</VStack>

With label

Uploading files...

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={45}>
    <ProgressLabel>Uploading files...</ProgressLabel>
  </Progress>
</VStack>

With value display

Progress

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={75}>
    <ProgressLabel>Progress</ProgressLabel>
    <ProgressValue />
  </Progress>
</VStack>

Different values

Not started

Getting started

Halfway there

Complete

<VStack gap={4} className="w-full max-w-md mx-auto">
  <Progress value={0}>
    <ProgressLabel>Not started</ProgressLabel>
    <ProgressValue />
  </Progress>
  <Progress value={25}>
    <ProgressLabel>Getting started</ProgressLabel>
    <ProgressValue />
  </Progress>
  <Progress value={50}>
    <ProgressLabel>Halfway there</ProgressLabel>
    <ProgressValue />
  </Progress>
  <Progress value={100}>
    <ProgressLabel>Complete</ProgressLabel>
    <ProgressValue />
  </Progress>
</VStack>

Indeterminate

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={null}>
    <ProgressLabel>Loading...</ProgressLabel>
  </Progress>
</VStack>