Components

Progress

Displays an indicator showing the completion progress of a task — a linear bar or a circular ring.

php artisan blatui:add progress

<div class="w-full max-w-sm">
    <x-ui.progress :value="60" />
</div>

Circular

72%

<div class="flex flex-wrap items-center gap-6">
    <x-ui.progress circular :value="72" :size="76" show-value aria-label="Storage used" />
    <x-ui.progress circular :value="45" :size="60" :thickness="5" aria-label="Goal" />
    <x-ui.progress circular :value="90" :size="48" :thickness="5" class="text-emerald-500" aria-label="Uptime" />
    <x-ui.progress circular indeterminate :size="40" :thickness="4" aria-label="Loading" />
</div>

Colors

{{-- Coloured progress bars via the semantic tokens. --}}
<div class="flex w-full max-w-md flex-col gap-4">
    <x-ui.progress :value="72" class="bg-success/20 *:data-[slot=progress-indicator]:bg-success" />
    <x-ui.progress :value="56" class="bg-info/20 *:data-[slot=progress-indicator]:bg-info" />
    <x-ui.progress :value="38" class="bg-warning/20 *:data-[slot=progress-indicator]:bg-warning" />
    <x-ui.progress :value="20" class="bg-destructive/20 *:data-[slot=progress-indicator]:bg-destructive" />
</div>

Indeterminate

{{-- Indeterminate (looping) progress for unknown durations. --}}
<div class="w-full max-w-md">
    <x-ui.progress indeterminate aria-label="Loading" />
</div>

Sizes

{{-- Different bar heights. --}}
<div class="flex w-full max-w-md flex-col gap-4">
    <x-ui.progress :value="60" class="h-1" />
    <x-ui.progress :value="60" class="h-2" />
    <x-ui.progress :value="60" class="h-3" />
    <x-ui.progress :value="60" class="h-4" />
</div>

Values

<div class="flex w-full max-w-sm flex-col gap-3">
    <x-ui.progress :value="25" aria-label="25 percent" />
    <x-ui.progress :value="50" aria-label="50 percent" />
    <x-ui.progress :value="75" aria-label="75 percent" />
    <x-ui.progress :value="100" aria-label="100 percent" />
</div>

With Label

Uploading files… 60%

<div class="grid w-full max-w-sm gap-2">
    <div class="flex items-center justify-between text-sm">
        <span class="font-medium">Uploading files…</span>
        <span class="text-muted-foreground tabular-nums">60%</span>
    </div>
    <x-ui.progress :value="60" aria-label="Upload progress" />
</div>

API Reference

Props, slots and exposed methods for <x-ui.progress>.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress, clamped to the 0-100 range. Ignored when indeterminate is true.
`indeterminate`	`bool`	`false`	Show an animated indeterminate state (no aria-valuenow) for work of unknown duration.
`ariaLabel`	`string`	`'Progress'`	Accessible name for the progressbar role.
`circular`	`bool`	`false`	Render a circular ring instead of the default linear bar.
`size`	`int`	`64`	Circular only: ring diameter in pixels.
`thickness`	`int`	`6`	Circular only: ring stroke width in pixels.
`showValue`	`bool`	`false`	Circular only: render the percentage in the centre of the ring (hidden while indeterminate).