Component primitive

Brand Progress

<brand-progress> wraps Web Awesome's <wa-progress-bar> or <wa-progress-ring>. Set value (0-100) for determinate; omit for an indeterminate bar.

<brand-progress>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-progress>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Progress bar

Indeterminate

Progress ring

25%

50%

75%

100%

Usage

import { BrandProgress } from '@brandos/ui';

<brand-progress value="60"></brand-progress>
<brand-progress indeterminate label="Loading"></brand-progress>
<brand-progress type="ring" value="25">25%</brand-progress>