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 default string
Possible values default, sm, or lg.

Progress

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

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

Size

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

<div class="flex flex-col gap-8">
    <x-progress-bar progress="75" size="sm" />
    <x-progress-bar progress="75" />
    <x-progress-bar progress="75" size="lg" />
</div>