Irozon Design System — design foundations, tokens and components by Irozon AB.
Irozon — Design System
Irozon Design System · v1.0
Components / Progress

One real number, 0–100.

Progress v1 — packages/design-system/src/components/progress.css. A determinate linear progress bar for a single ongoing task with a genuine percentage to report — a batch job, an upload, a multi-step wizard's overall completion. Not a substitute for Process, which lays out named stages rather than a percentage, and not an indeterminate spinner — see Loaders for "working, no known duration yet."

Track
.iz-progress — the host element. Carries the full ARIA progressbar contract since this package ships no JavaScript to set it for you.
Fill
.iz-progress__fill — one child <div>, sized from --iz-progress-value (0–100, unitless).
Value
--iz-progress-value, set inline on .iz-progress — the single source of truth for the rendered width. Keep it in sync with aria-valuenow yourself.
Color
Track is --color-border; fill is --color-action-primary — the same action color every other component resolves for its primary state, adapting automatically per theme.
Basic usage

A track, a fill, and one number.

Set --iz-progress-value to the same 0–100 number as aria-valuenow — the fill's width is entirely CSS-driven from that one custom property, no JavaScript required to compute a width string. 

<div
  class="iz-progress"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="62"
  aria-label="Batch progress, 62 percent"
  style="--iz-progress-value: 62"
>
  <div class="iz-progress__fill"></div>
</div>
Usage

Do / Don't.

Do
Use it when there's one real, known 0–100 number to report · keep --iz-progress-value and aria-valuenow in sync · give it an accessible name (aria-label or aria-labelledby).
Don't
Reach for Progress when the real information is "which named stage am I on" — use Process instead · use it for an unknown-duration spinner — use Loaders · invent a percentage when there isn't a genuine one to report.
Accessibility

The full progressbar contract, on the host element.

This package ships no JavaScript, so every ARIA attribute below is the consumer's responsibility to set and keep current — the CSS alone cannot infer any of it.

Role
role="progressbar" on .iz-progress.
Range
aria-valuemin="0" and aria-valuemax="100" — fixed, since the fill's own --iz-progress-value is already a 0–100 percentage.
Current value
aria-valuenow — update it alongside --iz-progress-value on every change; they must always agree.
Accessible name
aria-label (or aria-labelledby pointing at visible text) describing what's progressing — "Batch progress", "Uploading files" — not just a bare percentage.
Reduced motion
The fill's width transition is disabled under prefers-reduced-motion: reduce; the current value is still fully conveyed via the ARIA attributes regardless of animation.