Progress Bar
Visually display progress.
<x-progress-bar progress="75" />
<x-progress-bar progress="75" />
| Attribute |
Default |
Description |
progress |
0 |
int
Control the progress bar fill. |
size |
null |
string || null
Possible values null, sm, or lg. |
Control the progress bar fill by supplying the progress="" attribute.
<div class="space-y-8">
<x-progress-bar progress="25" />
</div>
<div class="space-y-8">
<x-progress-bar progress="25" />
</div>
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>
<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>