Progress Bar

Visual progress indicators for file uploads, storage quota limits, and system metrics.

Component Syntax

blade

<x-aura::progress-bar :percent="75" size="md" variant="default" />

1. Progress Scale

blade

Profile Completion

75%

Storage Quota

40%

<x-aura::flex direction="col" align="stretch" gap="1">
    <x-aura::flex align="center" justify="between">
        <x-aura::text size="sm" weight="medium">
            Profile Completion
        </x-aura::text>

        <x-aura::text size="sm" variant="mono" weight="bold">
            75%
        </x-aura::text>
    </x-aura::flex>

    <x-aura::progress-bar :percent="75" size="md" />
</x-aura::flex>

2. Size Variations

blade

Small (sm - 6px)

Medium (md - 10px)

Large (lg - 16px)

<x-aura::progress-bar :percent="60" size="sm" />
<x-aura::progress-bar :percent="60" size="md" />
<x-aura::progress-bar :percent="60" size="lg" />

3. Status and Intent Colors

blade

Standard Neutral

90%

System Health (Positive)

98%

Memory Warning

82%

Storage Critical (Danger)

95%

<x-aura::progress-bar :percent="90" variant="default" size="md" />
<x-aura::progress-bar :percent="98" variant="positive" size="md" />
<x-aura::progress-bar :percent="82" variant="warning" size="md" />
<x-aura::progress-bar :percent="95" variant="danger" size="md" />

Component Props

Available properties and configurations for the progress bar component.

Prop	Default	Available Values
percent	0	Numeric percentage from 0 to 100
size	md	sm md lg
variant	default	default subtle positive warning danger

Aura Wire

Component Library

Progress Bar

Component Syntax

1. Progress Scale

2. Size Variations

3. Status and Intent Colors

Component Props

Separator

Skeleton

Aura Wire