Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Examples
Display Options
Percentage (Default)
75%
Number Only
12
Out Of
15 / 25
No Label
Progress Percent Component
Simple Percent (0-100)
45%
Secondary Style
90%
Destructive Style
60%
Reactive Model
Animated (using model)
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current progress value. |
| max | number | 100 | Maximum progress value. |
| title | string | null | Label displayed above the bar. |
| model | string | null | AlpineJS model for reactive progress. |
| display | string | percentage |
Options: percentage, number, outof, none.
|
| style | string | default |
Options: default, secondary, destructive, success.
|
Usage
Basic Progress
blade
<x-plume::progress value="50" max="100" title="Uploading..." />Percentage Component
blade
<x-plume::progress.percent value="75" style="success" />