Efniv0.1

Components

Progress

Thin bar to communicate a job's completion. Pair with a value label — a bare bar without a number is guesswork.

When to useto show how far along a determinate job is (upload, batch, backfill), or that something is running when the duration is unknown.

Import

import { Progress, ProgressLabel, ProgressValue } from "@ravnhq/efni/progress"

Default

x
x
x
x
<Progress value={0} />
<Progress value={35} />
<Progress value={62} />
<Progress value={100} />

With label and value

MB-4472 · in flight
x
MB-4451 · completed
x
<Progress value={62}>
  <ProgressLabel>MB-4472 · in flight</ProgressLabel>
  <ProgressValue />
</Progress>

Indeterminate

Refreshing…
x
<Progress value={null}>
  <ProgressLabel>Refreshing…</ProgressLabel>
</Progress>

Guidelines

Do
  • Always show a numeric value when the progress is determinate.
  • Use indeterminate (value={null}) when duration is unknown — it beats a fake percentage.
  • Prefer inline Progress inside a table row over a modal spinner.
Don't
  • Don't stack multiple indeterminate bars — one is a status, three is chaos.
  • Don't use Progress for tiny durations (<300ms) — the animation itself becomes the delay.
  • Don't reuse it as a bar chart — use a real chart component when the value is data, not status.

Props

PropTypeDefaultDescription
valuenumber | null—The current value. The component is indeterminate when value is null.
…propsProgressPrimitive.Root.Props—Everything Progress passes to the element it renders.