Progress

Overview

Visual indicator of task completion as a filled bar or percentage readout.

<script lang="ts">
  import Progress from '@lostgradient/cinder/progress';
</script>

<Progress />

Live preview

Use when

Reporting measurable progress of a known task such as a file upload or multi-step import.
Showing an indeterminate work indicator when the task duration is unknown but the surface needs a progressbar role.

Avoid when

Showing a bounded measurement gauge (battery, CPU, quota) that is not task completion. Use Meter instead
Showing a small inline busy state next to a control — use spinner.
Reserving placeholder space for incoming content — use skeleton.

A progress bar with a known value out of 100.

When value is omitted the bar loops; reduced-motion users see a static surface.

Custom label text is exposed via aria-valuetext for screen readers.

Props for progress
Name	Type	Default	Description
`value`	`number`		Current progress value. Omit for indeterminate.
`max`	`number`	`100`	Maximum value. Defaults to 100.
`variant`	`'bar' \| 'ring'`	`'bar'`	Visual variant. Default `bar`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size token. Default `md`.
`label`	`text`		Human-readable status, exposed as `aria-valuetext`. NOT the accessible name — supply `ariaLabel` or `ariaLabelledby` for that.
`ariaLabel`	`text`		Accessible name applied directly to the progressbar element when no visible label element is present in the page. Required unless `ariaLabelledby` is supplied.
`ariaLabelledby`	`text`		Id of a visible element that serves as the accessible name for the progressbar. Prefer this over `ariaLabel` when a visible label exists. Required unless `ariaLabel` is supplied.