Skip to content

Overview

The <x-aura::progress> component renders a horizontal progress bar that visually communicates the completion status of a task or process. It supports multiple color variants, three sizes, an optional percentage label, striped patterns, and animation effects. The value is automatically clamped between 0 and the max value.

Basic Usage

<x-aura::progress :value="65" />

Props

Prop Type Default Description
value int|float 0 Current progress value. Clamped between 0 and max.
max int|float 100 Maximum value for the progress bar.
color string 'primary' Color variant. Options: primary, secondary, success, warning, danger.
size string 'md' Height of the progress bar. Options: sm, md, lg.
label bool false When true, displays the rounded percentage inside the bar.
animated bool false Adds a moving animation to the striped pattern.
striped bool false Applies a diagonal striped pattern to the bar.

Variants / Examples

Progress with Label

42% 
<x-aura::progress :value="42" :label="true" />

Colored Variants

<x-aura::progress :value="80" color="success" />
<x-aura::progress :value="55" color="warning" />
<x-aura::progress :value="30" color="danger" />

Size Variants

<x-aura::progress :value="70" size="sm" />
<x-aura::progress :value="70" size="md" />
<x-aura::progress :value="70" size="lg" />

Striped and Animated

<x-aura::progress :value="65" :striped="true" />
<x-aura::progress :value="65" :striped="true" :animated="true" />

File Upload Progress (Livewire Example)

document.pdf 75% 
<div>
    <p class="mb-2 text-sm">Uploading: {{ $fileName }}</p>
    <x-aura::progress
        :value="$uploadProgress"
        :label="true"
        color="primary"
        :animated="$uploadProgress < 100"
        :striped="$uploadProgress < 100"
    />
    @if($uploadProgress === 100)
        <p class="mt-2 text-sm text-green-600">Upload complete!</p>
    @endif
</div>

Custom Max Value

70% 
{{-- Progress out of 500 total steps --}}
<x-aura::progress :value="350" :max="500" :label="true" />

Multi-Step Progress

Step 1: Account Details

Step 2: Profile Setup

Step 3: Verification

<div class="space-y-3">
    <div>
        <p class="text-sm mb-1">Step 1: Account Details</p>
        <x-aura::progress :value="100" color="success" size="sm" />
    </div>
    <div>
        <p class="text-sm mb-1">Step 2: Profile Setup</p>
        <x-aura::progress :value="60" color="primary" size="sm" />
    </div>
    <div>
        <p class="text-sm mb-1">Step 3: Verification</p>
        <x-aura::progress :value="0" size="sm" />
    </div>
</div>

Accessibility

  • The component uses role="progressbar" for assistive technology support.
  • Attributes aria-valuenow, aria-valuemin, and aria-valuemax are set to communicate the current progress to screen readers.
  • The percentage label provides a visual indication of progress that supplements the ARIA attributes.