Progress

Shows the completion progress of a task.

import { BuiProgress } from 'ng-blatui';

<bui-progress [value]="60" ariaLabel="60 percent" />

Values

<bui-progress [value]="25" ariaLabel="25%" />
<bui-progress [value]="50" ariaLabel="50%" />
<bui-progress [value]="100" ariaLabel="100%" />

Sizes

<bui-progress class="h-1" [value]="60" ariaLabel="Thin" />
<bui-progress class="h-3" [value]="60" ariaLabel="Thick" />

Colors

<!-- recolor track + indicator via classes -->
<bui-progress class="bg-success/20 *:data-[slot=progress-indicator]:bg-success" [value]="72" ariaLabel="Success" />

Indeterminate

<bui-progress [indeterminate]="true" ariaLabel="Loading" />

With label

Uploading files…60%

<div class="flex justify-between text-sm">
  <span class="font-medium">Uploading…</span><span class="tabular-nums">60%</span>
</div>
<bui-progress [value]="60" ariaLabel="Upload progress" />

Circular

<!-- circular ring; tune size + thickness -->
<bui-progress [value]="66" [circular]="true" [size]="56" [thickness]="6" />

API reference

Inputs

Prop	Type	Default	Description
`value`	`number`	`0`	Completion percentage from 0 to 100; values are clamped to that range.
`indeterminate`	`boolean`	`false`	Show an unknown-duration animation instead of a fixed value.
`circular`	`boolean`	`false`	Render a circular ring instead of a linear bar.
`size`	`number`	`40`	Diameter of the circular ring, in pixels.
`thickness`	`number`	`4`	Stroke width of the circular ring, in pixels.
`ariaLabel`	`string`	`'Progress'`	Accessible label announced for the progress bar.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.