Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Examples

Display Options

Percentage (Default) %

Number Only

Out Of /

No Label

blade

<div class="w-full max-w-md space-y-4">
    <x-plume::progress value="75" max="100" title="Percentage (Default)"
        display="percentage" />
    <x-plume::progress value="12" max="20" title="Number Only" display="number" />
    <x-plume::progress value="15" max="25" title="Out Of" display="outof" />
    <x-plume::progress value="50" max="100" title="No Label" display="none" />
</div>

Progress Percent Component

Simple Percent (0-100) %

Secondary Style %

Destructive Style %

blade

<div class="w-full max-w-md space-y-4">
    <x-plume::progress.percent value="45" title="Simple Percent (0-100)" />
    <x-plume::progress.percent value="90" style="secondary" title="Secondary Style" />
    <x-plume::progress.percent value="60" style="error" title="Destructive Style" />
</div>

Reactive Model

Animated (using model) %

blade

<div class="w-full max-w-md space-y-4" x-data="{ val: 33 }">
    <x-plume::progress.percent model="val" title="Animated (using model)" />
    <x-plume::button size="sm" style="outline"
        x-on:click="val = Math.floor(Math.random() * 101)">Randomize</x-plume::button>
</div>

Prop	Type	Default	Description
value	int	0	The current completion value. Ignored if $model is provided.
max	int	100	The maximum value representing 100% completion.
style	string	'default'	Color style: 'default', 'secondary', 'error', 'success'.
title	string	null	Optional label text displayed above the bar.
display	string	'percentage'	How to display the value: 'percentage', 'number', 'outof', 'inside', 'none'.
model	string	null	AlpineJS model name for dynamic progress updates.

Usage

blade

<x-plume::progress value="50" max="100" title="Uploading..." />
<x-plume::progress.percent value="75" style="success" />