Progress bar
@xui/progress-barA horizontal bar showing how far along an operation is.
Install
pnpm add @xui/progress-bar Add the barrel to a standalone component's imports:
import { XuiProgressBarImports } from '@xui/progress-bar';@Component({ imports: [XuiProgressBarImports], // …})Examples
Default
Loading preview…
<div class="max-w-sm"><xui-progress-bar [value]="0.6" color="primary" size="md" [stripes]="true" [animate]="true" /></div>Indeterminate
Loading preview…
<div class="max-w-sm"><xui-progress-bar color="primary" size="md" [stripes]="true" [animate]="true" /></div>Sizes
Loading preview…
<div class="flex max-w-sm flex-col gap-4"> <xui-progress-bar size="sm" [value]="0.6" color="primary" [stripes]="true" [animate]="true" /> <xui-progress-bar size="md" [value]="0.6" color="primary" [stripes]="true" [animate]="true" /> <xui-progress-bar size="lg" [value]="0.6" color="primary" [stripes]="true" [animate]="true" /></div>Colors
Loading preview…
<div class="flex max-w-sm flex-col gap-4"> <xui-progress-bar color="primary" [value]="0.6" size="md" [stripes]="true" [animate]="true" /> <xui-progress-bar color="secondary" [value]="0.6" size="md" [stripes]="true" [animate]="true" /> <xui-progress-bar color="success" [value]="0.6" size="md" [stripes]="true" [animate]="true" /> <xui-progress-bar color="error" [value]="0.6" size="md" [stripes]="true" [animate]="true" /> <xui-progress-bar color="warning" [value]="0.6" size="md" [stripes]="true" [animate]="true" /> <xui-progress-bar color="info" [value]="0.6" size="md" [stripes]="true" [animate]="true" /></div>Without stripes
Loading preview…
<div class="max-w-sm"><xui-progress-bar [value]="0.6" color="primary" size="md" [stripes]="false" [animate]="true" /></div>API
A horizontal bar showing how far along an operation is.
Variants
sizemdcolorprimarystripestrueanimatetrueindeterminatefalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''colorXuiProgressBarVariants['color']Intent colour of the filled portion.this.config.colorsizeXuiProgressBarVariants['size']Track thickness.this.config.sizevaluenumber | null | undefinedHow far along the operation is, between 0 and 1. Out-of-range values are clamped. Leave it unset for an indeterminate bar.undefinedstripesbooleanDraw diagonal stripes across the fill.this.config.stripesanimatebooleanScroll the stripes, so the bar reads as busy. Needs stripes to be visible.this.config.animatearia-labelstring | nullAccessible name for the bar — what is progressing.nullaria-labelledbystring | nullId of an element naming the bar. Use it instead of aria-label when that text is already on screen.null