Progress

Displays task completion progress with accessible status semantics.

Displays task completion progress with accessible progressbar semantics.

Progress is backed by @areia/slots and automatically wires the label, value, track, and indicator slots after mount.

Uploading

import { ilha } from "ilha";
import { Progress } from "areia";

export default ilha.render(() => (
  <Progress label="Uploading" value={45} />
));

Import

import { Progress } from "areia";

Usage

Loading project

import { ilha } from "ilha";
import { Progress } from "areia";

export default ilha.render(() => (
  <Progress label="Loading project" value={60} />
));

Examples

Determinate

Pass a numeric value to render determinate progress. The indicator width is computed from min, max, and value.

Importing data

import { ilha } from "ilha";
import { Progress } from "areia";

export default ilha.render(() => (
  <Progress label="Importing data" value={72} />
));

Indeterminate

Use value: null when the total amount of work is unknown.

Syncing

import { ilha } from "ilha";
import { Progress } from "areia";

export default ilha.render(() => (
  <Progress label="Syncing" value={null} />
));

Custom Range

Storage used

import { ilha } from "ilha";
import { Progress } from "areia";

export default ilha.render(() => (
  <Progress
    label="Storage used"
    min={0}
    max={500}
    value={125}
  />
));

Without Value Text

Processing

import { ilha } from "ilha";
import { Progress } from "areia";

export default ilha.render(() => (
  <Progress label="Processing" value={35} showValue={false} />
));

Custom Styling

Use trackClass, indicatorClass, and valueClass to style internal parts.

Deployment

import { ilha } from "ilha";
import { Progress } from "areia";

export default ilha.render(() => (
  <Progress
    label="Deployment"
    value={80}
    trackClass="h-3 bg-areia-surface-muted"
    indicatorClass="bg-emerald-500"
    valueClass="text-emerald-600"
  />
));

API

`Progress(input)`

Prop	Type	Default	Description
`value`	`number \| null`	`null`	Current progress value. `null` renders indeterminate progress.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`label`	`unknown`	—	Visible label rendered in `data-slot="progress-label"`.
`showValue`	`boolean`	`true`	Whether to render `data-slot="progress-value"`.
`trackClass`	`string`	—	Additional classes for the track.
`indicatorClass`	`string`	—	Additional classes for the indicator.
`valueClass`	`string`	—	Additional classes for the value text.
`onValueChange`	`(value: number \| null) => void`	—	Called when the controller value changes.

Slots

Progress renders these data slots:

progress
progress-label
progress-track
progress-indicator
progress-value

The root and parts receive status attributes from the slot controller:

data-indeterminate
data-progressing
data-complete
data-state