On this page

Progress

Progress shows task completion. Pass value for known progress. Omit it, or pass false, while work is underway without a known duration.

Playground

Value, label and hint

60%

42%

Uploading files…

3 of 7

Preparing upload…

~ 3 minutes left

<Progress value={60} />
<Progress value={42} label="Uploading files…" hint="3 of 7" />

// Omit value, or pass false, while the duration is unknown.
<Progress label="Preparing upload…" hint="~ 3 minutes left" />

value sets known completion relative to max, which defaults to 100. label follows the percentage. hint is right-aligned. With no value, the label identifies indeterminate work and the loading animation takes the track.

Size

60%

Small

~ 3 minutes left

60%

Medium

~ 3 minutes left

60%

Large

~ 3 minutes left

<Progress size="small" tone="info" value={60} label="Small" hint="~ 3 minutes left" />
<Progress tone="info" value={60} label="Medium" hint="~ 3 minutes left" />
<Progress size="large" tone="info" value={60} label="Large" hint="~ 3 minutes left" />

size scales the track and the default label row together. medium is the default.

Tone

60%

Brand

60%

Info

60%

Success

60%

Warning

60%

Critical

60%

Custom

<Progress value={60} tone="brand" label="Brand" />
<Progress value={60} tone="info" label="Info" />
<Progress value={60} tone="success" label="Success" />
<Progress value={60} tone="warning" label="Warning" />
<Progress value={60} tone="critical" label="Critical" />
<Progress value={60} tone="#e0457b" label="Custom" />

tone colors the track, indicator, and label row. Use neutral for the default, a named semantic tone, or any CSS color.

Border

60%

Border on every edge

3 of 5

60%

Top-mounted indicator

3 of 5

60%

Bottom-mounted indicator

3 of 5

<Progress
  value={60}
  tone="warning"
  label="Border on every edge"
  hint="3 of 5"
  style={{ borderWidth: '2px' }}
/>

// A bottom border works when the indicator is at the top of the app.
<Progress
  value={60}
  tone="info"
  label="Top-mounted indicator"
  hint="3 of 5"
  style={{ borderWidth: '0 0 1px' }}
/>

// A top border works when the indicator is at the bottom of the app.
<Progress
  value={60}
  tone="brand"
  label="Bottom-mounted indicator"
  hint="3 of 5"
  style={{ borderTopWidth: '1px' }}
/>

The track starts borderless. Set a border width to reveal its tone-aware border color. A bottom edge works for an indicator at the top of an app. A top edge works for one at the bottom.

Round

60%

Fully round

60%

4px radius

<Progress value={60} round label="Fully round" />
<Progress value={60} round={4} label="4px radius" />

round makes the track fully round. Pass a number or CSS length for a custom radius.

Component props

Prop	Type	Default	Description
value?	number`false`	—	Current progress value. Omit this prop, or pass `false`, to show indeterminate progress. Negative values are clamped to 0.
max?	number	`100`	Upper bound of the range.
tone?	`neutralbrandcriticalinfosuccesswarning`string	`'neutral'`	Color variant, or any literal CSS color for a one-off custom tone (the surface / indicator / text are derived from it in oklch). Named tones track light/dark automatically.
size?	`smallmediumlarge`	`medium`	Size variant. Scales the track and the default label row together.
round?	booleannumberstring	—	Fully-round track (`border-radius: 999px`); the fill is clipped to it. Pass a `number` (px) or a CSS length string for a custom radius.
label?	string	—	Text label displayed after the percentage, or on its own for indeterminate progress. When you provide custom `children` (which replace the default label row), `label` is no longer rendered — but it still supplies the progressbar's accessible name.
hint?	string	—	Right-aligned hint text (e.g. "3 of 7"). Like `label`, it's not rendered when custom `children` are provided but still feeds the accessible name.

Inherited props (children, className, id, slot, style, tabIndex, title)

Prop	Type	Default	Description
children?	ReactNode	—	Child elements. When provided, replaces the component's default label/content.
className?	string	—	CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a `<div>`/`<span>`.
id?	string	—	HTML `id` attribute.
slot?	string	—	Assigns the element to a named `<slot>` of a parent web component (e.g. `slot="header"` inside a `<Card>`, `slot="footer"` inside a `<Dialog>`).
style?	CSSProperties	—	Inline styles on the component's root element. Set layout/positioning here (or via `className`) directly on the component instead of adding a wrapper.
tabIndex?	number	—	Tab order. Set to `-1` to skip the element when tabbing.
title?	string	—	HTML `title` attribute — native browser tooltip on hover.

Plus every standard DOM event handler (onClick, onFocus, onKeyDown, …) and any data-* or aria-* attribute — forwarded as-is to the underlying <a-*> element.

Web Component

42%

Upload

Preparing upload

<a-progress style="width: 100%" value="42" max="100" tone="info" role="progressbar"
  aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" aria-label="Upload, 42%">
  <a-progress-label>
    <a-progress-number>42%</a-progress-number>
    <a-progress-text>Upload</a-progress-text>
  </a-progress-label>
</a-progress>

<!-- Omit value for indeterminate progress. -->
<a-progress style="width: 100%" round="50px" role="progressbar" aria-label="Preparing upload">
  <a-progress-label>
    <a-progress-text>Preparing upload</a-progress-text>
  </a-progress-label>
</a-progress>

Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.

Add the progressbar semantics and label structure when using the element directly.

Native HTML progress

<progress
  data-anta
  value="42"
  max="100"
  tone="info"
  aria-label="Uploading, 42%"
  style="width: 100%"
></progress>

<!-- Omit value for native indeterminate progress. -->
<progress data-anta round="50px" aria-label="Preparing upload" style="width: 100%"></progress>

For a plain HTML progress indicator, add data-anta to <progress>. It keeps the browser’s native semantics, including indeterminate progress when value is absent, while using Anta’s track, fill, tone, and size treatments. Native progress does not render Anta’s label or hint structure; give it an accessible name instead.

Styling

62%

Uploading

62%

/* a fancy bar: rounded track (all sides), a multi-stop gradient fill with a glow,
   and a crisp hard right edge (the default soft right-edge fade is cleared). */
a-progress.fancy {
  border-radius: 999px;
  background: light-dark(var(--bg-5), #26232c);
}
a-progress.fancy::part(indicator) {
  background: linear-gradient(90deg, #6a5acd, #d44ea3 55%, #ff8a5b);
  box-shadow: 0 0 12px rgba(212, 78, 163, 0.55);   /* glow */
}
a-progress.fancy::part(indicator)::after { background: none; }   /* hard right edge */

/* the percentage / label / hint are light-DOM children — recolor for the bar */
a-progress.fancy a-progress-number,
a-progress.fancy a-progress-text { color: #fff; }
a-progress.fancy a-progress-hint { color: var(--text-2); }

For one-offs, the track is the host (style a-progress directly) and the indicator (fill bar) is a shadow part — ::part(indicator). The .fancy class is just for the demo.