x-progress
A horizontal progress bar for showing completion. Set a value (0–100), or use the indeterminate state for unknown-duration work. Three thicknesses.
Three thicknesses, plus a looping animation for unknown-duration work.
<div class="grid w-full max-w-md justify-center gap-5">
<x-components.progress :value="25" size="sm" />
<x-components.progress :value="60" />
<x-components.progress :value="90" size="lg" />
<x-components.progress indeterminate />
</div>
| Prop | Type | Default | Description |
|---|---|---|---|
value
|
text |
0
|
Current progress amount. |
max
|
text |
100
|
The value representing 100% complete. |
size
|
select sm · md · lg |
md
|
Thickness of the bar. |
indeterminate
|
boolean |
false
|
Show a looping animation for work of unknown duration. |