Everyday

Playground

Progress

ui
control

Progress bar showing completion percentage or loading state

File uploads, form completion, loading indicators

import { Progress } from "@everydayos/ui";

Usage

Determinate progress with value

<Stack spacing="sm">
  <div className="flex justify-between text-sm">
    <Text variant="muted">Uploading...</Text>
    <Text variant="muted">75%</Text>
  </div>
  <Progress value={75} />
</Stack>

API

PropTypeDefault
classNameunknown—
valueunknown—

Examples

Indeterminate

Progress without value for unknown duration

<Progress />

Composition

Pairs well with

Stack
Text
Heading

When to avoid

  • Indeterminate loading — use Spinner instead
  • Need step indicator — use custom step component