ProgressBar

How far along.

<sui-progress-bar>FeedbackStable

About

Determinate bar or indeterminate sweep for work with a known or unknown total: an import, a budget meter, a sync. show-value adds a readout: the rounded percentage, or the value slot in the screen's own units. It is output, not a control, so it never takes focus.

Usage

<sui-progress-bar label="Importing bank feed" value="64" show-value></sui-progress-bar> <script type="module"> import { defineCustomElements } from "@shineui/core/loader"; import "@shineui/core/shineui.css"; defineCustomElements(); </script>

import { SuiProgressBar } from "@shineui/react"; import "@shineui/core/shineui.css"; export function Example() { return <SuiProgressBar label="Importing bank feed" value="64" showValue />; }

import { Component } from "@angular/core"; import { SuiProgressBar } from "@shineui/angular"; @Component({ standalone: true, imports: [SuiProgressBar], template: `<sui-progress-bar label="Importing bank feed" value="64" show-value></sui-progress-bar>`, }) export class Example { }

Basic

A label, a navy fill and, with show-value, the rounded percentage. The track is role="progressbar" with min 0, max 100 and the value, named by the label; it never takes focus, because it is output, not a control.

Quiet by default

Without show-value the bar draws the label and the fill and says no number, which is the shape for a bar beside its own count or inline in a row. Add show-value where the percentage is the point.

Accent and indeterminate

accent swaps the navy fill for orange, for a budget or attention meter. indeterminate sweeps while the total is unknown, drops aria-valuenow and hides any readout, so assistive tech says busy rather than a number that is not true; the sweep slows under reduced motion instead of stopping.

Value slot

Fill the value slot to say the number in the units the screen is about. The slot replaces the percentage readout only: value, aria-valuenow and the drawn fill are unchanged, and it is drawn with the readout, so it needs show-value too.

$5,220 of $6,000

340 of 1,200

Height and captions

height is the track in px and the radius follows it. With no label and no readout the caption row is not rendered, which is the shape for a bar inline in a table row; name it with aria-label on the host so the progressbar role is not left unnamed.

Live value

value is a plain number prop, so progress is written from app state. It clamps to 0 through 100 and the readout rounds.

0 of 1,200

// setup(root): properties and events setup(root) { const bar = root.querySelector('#pb-live'); const count = root.querySelector('#pb-count'); const total = 1200; let done = 0; const paint = () => { bar.value = (done / total) * 100; count.textContent = `${done.toLocaleString('en-US')} of 1,200`; }; root.querySelector('#pb-step').addEventListener('click', () => { done = Math.min(total, done + 180); paint(); }); root.querySelector('#pb-reset').addEventListener('click', () => { done = 0; paint(); }); }

API

`<sui-progress-bar>`

Properties

Property	Attribute	Type	Default	Description
`accent`	`accent`	`boolean`	`false`	Accent fill instead of brand, for a budget or attention meter.
`height`	`height`	`number`	`8`	Track height in px. The radius follows (height / 2).
`indeterminate`	`indeterminate`	`boolean`	`false`	Sweeps while the total is unknown and drops `aria-valuenow`, so assistive tech says busy rather than a number that is not true. The sweep slows under reduced motion instead of stopping, because a frozen sweep reads as a hang.
`label`	`label`	`string`string \| undefined		Left-hand caption above the track. Also the accessible name of the `progressbar` role; a bar with no caption takes its name from `aria-label` on the host instead.
`showValue`	`show-value`	`boolean`	`false`	Draws the readout to the right of the label: the rounded percentage in the page's locale (`47%`, `47 %` in German), or the `value` slot when it is filled. Off by default, so a bar inline in a row or beside its own count says nothing twice. Ignored while `indeterminate`.
`value`	`value`	`number`	`0`	Completion, 0 to 100. Ignored while `indeterminate`.

Slots

Slot	Description
`value`	Replaces the percentage readout. Drawn only with `show-value`, and never while `indeterminate`.

Theming

Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.