Progress

Usage

import { Progress } from '@carabine/ui/progress';

<Progress value={62} showValue label="Uploading photos" />
<Progress label="Working" />   // no value at all — not zero — is indeterminate

Leaving value out is indeterminate. Passing 0 is nought per cent, and the two mean different things — a bar that cannot tell them apart says “stuck” when it means “working”.

The toast’s strip

Two rows of small cells, three colours per side, and a scatter pattern held as two strings so the lit cells never form a stripe. The toast burns it down as a card's life runs out; this fills it left to right. One deliberate difference in direction, everything else the same.

const SCATTER = ['1021120210112021012210120112', '0112021120210112201101221012'];

The snake — the travelling highlight on an indeterminate strip — runs at 1.7s with --row * 0.09s of phase, so the two rows do not pulse in lockstep. Both are in progress.css: a keyframe driven by a per-element custom property is not something a utility can say.

Examples

Its own range

min and max are whatever the thing actually counts, and format writes both what is drawn and what is announced — from one place, because two formatters is how a bar ends up reading “62%” and saying “0.62”.

<Progress
  value={3}
  max={7}
  showValue
  format={(step) => `${step}/7`}
  label="Step three of seven"
/>

The bar variant

<Progress variant="bar" value={78} height={8} showValue label="Disk" />

Customization

height is the whole strip rather than one cell, so a row count can change without the component changing size: 11 = 2 × 4 + 3.

import { Progress, tones } from '@carabine/ui/progress';

<Progress
  value={value}
  cells={36}                 // across. Capped at 120
  rows={3}                   // lines. Capped at 4
  height={14}                // the whole strip, lines and gaps included
  gap={2}
  color={tones.success}      // one colour, or three brightest first
  track="rgba(255,255,255,0.06)"
  theme="light"
/>

tones is exported — the toast's four states as triples — so a strip that turns green on completion uses the same green the toast does rather than one that nearly matches.

Styling reference

Colours are plain CSS strings, one or three of them. Three is what makes the strip read as material rather than as a fill: the lit cells are not one colour but a scatter of three shades, and so is the spent side.

API reference

Colours are data and dimensions are props, and neither covers a margin, a font, or a class from your own system. That is what these are for. State is legible from CSS as well — data-state, data-disabled, data-side — so a rule can answer it without knowing a single class name of ours. See Theming.

Shades is string | [string, string, string] — one colour, or three brightest first.

Related components