Progress Bar

Display step-by-step progress through multi-step processes like forms, wizards, or workflows. Progress bars help users understand their current position and what steps remain.

Progress Array Structure

Progress bars require an array of steps, where each step can have text, completion status, and optional icons. The complete property determines which steps are marked as finished:

@php
    $progressItems = [
        [
            'text' => 'User Info',
            'complete' => true,
            'icon' => '<i class="fa-solid fa-user fa-2xl"></i>',
        ],
        [
            'text' => 'Company Info',
            'complete' => true,
            'icon' => '<i class="fa-solid fa-building fa-2xl"></i>',
        ],
        [
            'text' => 'Payment',
            'icon' => '<i class="fa-solid fa-cash-register fa-2xl"></i>',
        ],
        [
            'text' => 'Confirmation',
            'icon' => '<i class="fa-solid fa-check fa-2xl"></i>',
        ],
    ];
@endphp

The progress bar component supports 9 different variants, each with its own color scheme for completed and incomplete steps:

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

<x-andach-progress-bar :items="$progressItems" />
<x-andach-progress-bar :items="$progressItems" variant="dark" />
<x-andach-progress-bar :items="$progressItems" variant="light" />
<x-andach-progress-bar :items="$progressItems" variant="brand" />
<x-andach-progress-bar :items="$progressItems" variant="primary" />
<x-andach-progress-bar :items="$progressItems" variant="secondary" />
<x-andach-progress-bar :items="$progressItems" variant="success" />
<x-andach-progress-bar :items="$progressItems" variant="warning" />
<x-andach-progress-bar :items="$progressItems" variant="danger" />

Customisation

Attribute Name	Type	Default Value	Description
items	array	[]	Array of step objects with 'text', 'complete', and optional 'icon' properties.
background	bool	null	Controls the background styling of the progress bar.
border	bool	null	Adds border styling for enhanced visual separation.
ring	bool	null	Adds a ring/outline effect around the progress bar.
rounded	bool	null	Controls the border radius of the progress bar corners.
shadow	bool	null	Adds drop shadow effects for depth and elevation.
size	string	null	Controls the overall size and spacing. Options: 'xs', 'sm', 'base', 'lg', 'xl'.
variant	string	null	Color scheme variant. Options: 'default', 'dark', 'light', 'brand', 'primary', 'secondary', 'success', 'warning', 'danger'.
inactiveVariant	string	null	Separate color scheme for incomplete steps.

Different Progress States

Progress bars can represent different stages of completion:

Getting Started
Basic Setup
Configuration
Completion

Project Setup
Development
Testing
Deployment

Research
Planning
Execution
Review

$justStarted = [
    ['text' => 'Getting Started', 'complete' => true, 'icon' => '<i class="fa-solid fa-play"></i>'],
    ['text' => 'Basic Setup', 'icon' => '<i class="fa-solid fa-cog"></i>'],
    ['text' => 'Configuration', 'icon' => '<i class="fa-solid fa-sliders"></i>'],
    ['text' => 'Completion', 'icon' => '<i class="fa-solid fa-flag-checkered"></i>'],
];

$halfComplete = [
    ['text' => 'Project Setup', 'complete' => true, 'icon' => '<i class="fa-solid fa-folder-plus"></i>'],
    ['text' => 'Development', 'complete' => true, 'icon' => '<i class="fa-solid fa-code"></i>'],
    ['text' => 'Testing', 'icon' => '<i class="fa-solid fa-flask"></i>'],
    ['text' => 'Deployment', 'icon' => '<i class="fa-solid fa-rocket"></i>'],
];

$almostDone = [
    ['text' => 'Research', 'complete' => true, 'icon' => '<i class="fa-solid fa-search"></i>'],
    ['text' => 'Planning', 'complete' => true, 'icon' => '<i class="fa-solid fa-clipboard-list"></i>'],
    ['text' => 'Execution', 'complete' => true, 'icon' => '<i class="fa-solid fa-hammer"></i>'],
    ['text' => 'Review', 'icon' => '<i class="fa-solid fa-eye"></i>'],
];

<x-andach-progress-bar :items="$justStarted" variant="primary" />
<x-andach-progress-bar :items="$halfComplete" variant="warning" />
<x-andach-progress-bar :items="$almostDone" variant="success" />

Size Variations

Control the size and spacing of progress steps:

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

<x-andach-progress-bar :items="$progressItems" size="sm" variant="secondary" />
<x-andach-progress-bar :items="$progressItems" size="lg" variant="brand" />

Styling Attributes

Enhance progress bars with various styling options:

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

User Info
Company Info
Payment
Confirmation

<x-andach-progress-bar :items="$progressItems" variant="primary" :border="true" />
<x-andach-progress-bar :items="$progressItems" variant="success" :shadow="true" :ring="true" />
<x-andach-progress-bar :items="$progressItems" variant="dark" :rounded="true" />

Real-World Examples

Common scenarios where progress bars enhance user experience:

User Onboarding

Welcome
Profile Setup
Preferences
Tutorial

Order Checkout Process

Cart Review
Shipping Info
Payment
Confirmation

Project Milestones

Planning
Design
Development
Launch

<x-andach-progress-bar :items="$onboardingFlow" variant="brand" />
<x-andach-progress-bar :items="$orderProcess" variant="success" />
<x-andach-progress-bar :items="$projectMilestones" variant="primary" />

Without Icons

Progress bars work well with or without icons for simpler implementations:

Step 1
Step 2
Step 3
Step 4

@php
    $simpleSteps = [
        ['text' => 'Step 1', 'complete' => true],
        ['text' => 'Step 2', 'complete' => true],
        ['text' => 'Step 3'],
        ['text' => 'Step 4'],
    ];
@endphp

<x-andach-progress-bar :items="$simpleSteps" variant="secondary" />