Progress Component

The Progress component provides a visual indicator for task completion or progress tracking.

Usage

Basic progress bar with default styling:

<x-progress :value="40" />

With Label and Percentage

Display a label and percentage indicator above the progress bar:

<x-progress 
    label="Progress" 
    :value="20" 
    :showPercentage="true" 
/>

Variants

The progress bar supports multiple color variants:

Primary

<x-progress variant="primary" :value="40" />

Secondary

<x-progress variant="secondary" :value="40" />

Success

<x-progress variant="success" :value="40" />

Info

<x-progress variant="info" :value="40" />

Warning

<x-progress variant="warning" :value="40" />

Danger

<x-progress variant="danger" :value="40" />

Custom Range

Define custom minimum and maximum values:

<x-progress 
    label="Upload Progress" 
    :value="350" 
    :min="0" 
    :max="500" 
    :showPercentage="true"
    variant="success"
/>

Livewire Integration

Bind the progress value to Livewire properties:

<x-progress 
    label="Processing" 
    :value="$uploadProgress" 
    :showPercentage="true"
    variant="info"
/>

class FileUpload extends Component
{
    public int $uploadProgress = 0;

    public function updatedFile(): void
    {
        // Simulate upload progress
        $this->uploadProgress = 25;
        
        // Process file...
        
        $this->uploadProgress = 100;
    }

    public function render(): View
    {
        return view('livewire.file-upload');
    }
}

Props Reference

Prop	Type	Default	Description
value	int	20	Current progress value
min	int	0	Minimum value
max	int	100	Maximum value
label	string|null	null	Label text displayed above the progress bar
showPercentage	bool	false	Whether to display the percentage indicator
variant	string	primary	Color variant: primary, secondary, success, info, warning, danger

References

Category	Path / Name	Description
Component	resources/views/components/progress.blade.php	Progress component file