Progress

Linear progress indicator with a label and semantic tones.

Overview

  • Use a determinate value from zero to 100 for work with measurable progress.

Aliases

progress bar

When to use

  • Use Progress for determinate work with a meaningful numeric or percentage state.
  • Name the task in the progress label.

When not to use

  • Do not use Progress for binary status; use Badge or Alert instead.
  • Use a loading indicator when no reliable progress value exists.

Structural parts

meter shell

root

Wraps label, track, and fill.

progress label

label

Names the work being measured.

background track

track

Shows the full extent of the work.

current value

fill

Represents the completed portion of the work.

Public interface

Props
NameTypeDefaultDescription
tone'brand' | 'success' | 'warning''brand'Chooses the semantic fill treatment.
size'sm' | 'md''md'Sets the component size.
valuenumber—Current determinate progress value from 0 to 100.
labelstring—Visible description of the in-progress work.
themeThemeContract—Sets the theme used to resolve component styles.
Slots
NameDescription
defaultOptional inline label content override.

Variants, sizes, and states

Variants

  • brand: General-purpose progress.
  • success: Positive completion context.
  • warning: Cautious progress where the work carries risk.

Sizes

  • sm: Compact inline progress.
  • md: Default reading size for most surfaces.

States

  • rest: Current measured value.
  • complete: Work has reached the end state.

Accessibility

Semantics

  • Exposes progress semantics through the meter structure and visible label.

Keyboard

  • The progress indicator is not interactive.

Screen readers

  • Name the task and expose its progress value as text.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-progress-gap
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

header

--dk-progress-header-gap
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

label

--dk-progress-label-color
#16181c
--dk-progress-label-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-progress-label-weight
650

value

--dk-progress-value-color
#16181c
--dk-progress-value-size
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

track

--dk-progress-track-bg
#e5e8ed
--dk-progress-track-radius
999px
--dk-progress-track-block-size
12px

indicator

--dk-progress-indicator-bg
#2072e4
--dk-progress-indicator-radius
999px

Implementation notes

  • Progress requires a determinate value.

Examples

Starter

Migration progress

A default progress meter with one label and determinate value.

<Progress tone="brand" value={68} label="Migration progress" />

Common patterns

Task nearly done

Use success tone when the work is finishing positively.

<Progress tone="success" value={92} label="Import complete" />

Edge cases

Risky workflow

Use warning for a task that needs attention. Duration alone does not indicate a warning.

<Progress tone="warning" value={40} label="Reindexing critical data" />

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

brand-md

pass

size=md|tone=brand

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: track · single-line 0 px single-line estimate; 0 px minimum width
    180 px: pass 280 px: pass 360 px: pass

success-sm

pass

size=sm|tone=success

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: track · single-line 0 px single-line estimate; 0 px minimum width
    180 px: pass 280 px: pass 360 px: pass

danger-md

pass

size=md|tone=danger

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: track · single-line 0 px single-line estimate; 0 px minimum width
    180 px: pass 280 px: pass 360 px: pass