Progress Bar

The inherited Ecology progress bar, wearing the Biochar Atlas skin. The Atlas's signature use is the 0–100 suitability meter; the default fill picks up forest green from --color-primary.

Inherited .astro import EsaProgressBar from '@esa/ecology/esa-progress-bar.astro';

Basic

A determinate bar with a label and visible value — the shape of the Atlas's suitability score readout. (78 is the calibration anchor: Douglas-fir slash at 550°C on the default scenario.)

<EsaProgressBar label="Suitability score" value={78} showValue />

Variants

<EsaProgressBar variant="primary" value={78} />
<EsaProgressBar variant="success" value={90} />
<EsaProgressBar variant="warning" value={48} />
<EsaProgressBar variant="danger" value={22} />

Sizes

<EsaProgressBar size="xs" value={64} />
<EsaProgressBar size="sm" value={64} />
<EsaProgressBar size="md" value={64} />
<EsaProgressBar size="lg" value={64} />

Indeterminate

When progress is unknown — fetching SSURGO data, running the scorer — the fill sweeps the track on a loop.

<EsaProgressBar label="Deriving soil context" mode="indeterminate" />

API

Prop	Type	Default	Description
`value`	`number`	`0`	Fill percentage, clamped to 0–100. Ignored when indeterminate.
`mode`	`'determinate' \| 'indeterminate'`	`'determinate'`	Known progress vs. a looping activity sweep.
`variant`	`'primary' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Fill color intent.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Track height (2 / 4 / 8 / 12px).
`label`	`string`	—	Optional label above the track; also the accessible name.
`showValue`	`boolean`	`false`	Shows the percentage beside the label (determinate only).