A progress bar component with color, size, label, striped, animated, and indeterminate variants.
Pass a value between 0 and 100 to fill the bar. The track color automatically matches the bar color.
<x-ui::progress :value="30" />
<x-ui::progress :value="60" />
<x-ui::progress :value="90" />Eight color options: zinc, blue (default), green, yellow, red, purple, lime, and sky.
<x-ui::progress :value="70" color="zinc" />
<x-ui::progress :value="70" color="blue" />
<x-ui::progress :value="70" color="green" />
<x-ui::progress :value="70" color="yellow" />
<x-ui::progress :value="70" color="red" />
<x-ui::progress :value="70" color="purple" />
<x-ui::progress :value="70" color="lime" />
<x-ui::progress :value="70" color="sky" />Four heights — xs (4 px), sm (6 px), md (10 px, default), lg (16 px).
<x-ui::progress size="xs" :value="60" color="blue" />
<x-ui::progress size="sm" :value="60" color="blue" />
<x-ui::progress size="md" :value="60" color="blue" />
<x-ui::progress size="lg" :value="60" color="blue" />Use label for a descriptive title, show-value to display the computed percentage, or both together.
{{-- Label only --}}
<x-ui::progress :value="45" color="green" label="Storage used" />
{{-- Value only --}}
<x-ui::progress :value="72" color="purple" :show-value="true" />
{{-- Both --}}
<x-ui::progress :value="88" color="blue" label="Upload progress" :show-value="true" />Add a diagonal stripe overlay with the striped prop. Works with any color and size.
<x-ui::progress :value="55" color="blue" striped />
<x-ui::progress :value="70" color="green" size="lg" striped />
<x-ui::progress :value="40" color="red" striped label="Critical usage" :show-value="true" />Add animated to set the stripes in motion — useful for active uploads, installs, or long-running tasks.
<x-ui::progress :value="65" color="blue" animated />
<x-ui::progress :value="80" color="lime" size="lg" animated label="Installing..." :show-value="true" />Use indeterminate when the duration or completion percentage is unknown — the bar loops indefinitely.
<x-ui::progress indeterminate color="blue" />
<x-ui::progress indeterminate color="purple" size="lg" label="Processing..." />
<x-ui::progress indeterminate color="green" size="sm" />Set a custom max to pass raw values — the component converts them to a percentage automatically.
{{-- 3 of 10 tasks complete --}}
<x-ui::progress :value="3" :max="10" color="blue" label="Tasks completed" :show-value="true" />
{{-- 1.2 GB of 5 GB used --}}
<x-ui::progress :value="1.2" :max="5" color="sky" label="1.2 GB of 5 GB" :show-value="true" />
{{-- 850 of 1000 points --}}
<x-ui::progress :value="850" :max="1000" color="lime" label="XP progress" :show-value="true" />