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" />