Progress Bar

Visually display progress.

Usage

<x-progress-bar progress="75" />

Component API

Attribute	Default	Description
`progress`	`0`	`int` Control the progress bar fill.
`size`	`null`	`string` \|\| `null` Possible values `null`, `sm`, or `lg`.

Progress

Control the progress bar fill by supplying the progress="" attribute.

<div class="space-y-8">
    <x-progress-bar progress="25" />
</div>

Size

Control the progress bar size by supplying the size="" attribute.

<div class="space-y-8">
    <x-progress-bar progress="75" size="lg" />
    <x-progress-bar progress="75" />
    <x-progress-bar progress="75" size="sm" />
</div>

Previous

Next