Progress Bar - Laravel Blade

Use the progress bar component to show the completion rate of a data indicator or use it as a loader element, available in multiple sizes, colors, and label options.

Default Progress

Blade code

<x-fwb.progress :value="45" />

Sizes

Extra small
Small
Default
Large
Extra large

Blade code

<div class="space-y-4">
    <div>
        <div class="mb-1 text-base font-medium text-gray-700 dark:text-white">Extra small</div>
        <x-fwb.progress :value="45" size="xs" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-gray-700 dark:text-white">Small</div>
        <x-fwb.progress :value="45" size="sm" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-gray-700 dark:text-white">Default</div>
        <x-fwb.progress :value="45" size="md" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-gray-700 dark:text-white">Large</div>
        <x-fwb.progress :value="45" size="lg" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-gray-700 dark:text-white">Extra large</div>
        <x-fwb.progress :value="45" size="xl" />
    </div>
</div>

Label Inside

45%

Blade code

<x-fwb.progress :value="45" inside-label="45%" />

Label Outside

Flowbite 45%

Blade code

<x-fwb.progress :value="45" outside-label="Flowbite" />

Colors

Blue
Dark
Red
Green
Yellow
Indigo
Purple

Blade code

<div class="space-y-4">
    <div>
        <div class="mb-1 text-base font-medium text-blue-700 dark:text-blue-500">Blue</div>
        <x-fwb.progress :value="45" color="blue" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-gray-700 dark:text-gray-500">Dark</div>
        <x-fwb.progress :value="50" color="gray" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-red-700 dark:text-red-500">Red</div>
        <x-fwb.progress :value="55" color="red" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">Green</div>
        <x-fwb.progress :value="60" color="green" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-yellow-700 dark:text-yellow-500">Yellow</div>
        <x-fwb.progress :value="65" color="yellow" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-indigo-700 dark:text-indigo-500">Indigo</div>
        <x-fwb.progress :value="70" color="indigo" />
    </div>
    <div>
        <div class="mb-1 text-base font-medium text-purple-700 dark:text-purple-500">Purple</div>
        <x-fwb.progress :value="75" color="purple" />
    </div>
</div>

Progress Values

Starting 0%
Quarter 25%
Half 50%
Three Quarters 75%
Complete 100%

Blade code

<div class="space-y-4">
    <x-fwb.progress :value="0" outside-label="Starting" />
    <x-fwb.progress :value="25" outside-label="Quarter" />
    <x-fwb.progress :value="50" outside-label="Half" />
    <x-fwb.progress :value="75" outside-label="Three Quarters" />
    <x-fwb.progress :value="100" outside-label="Complete" color="green" />
</div>

Component Properties

Progress x-fwb.progress

Prop Type Default Description
value int|float 0 Current progress value.
max int 100 Maximum progress value for percentage calculation.
color string blue Progress bar color. Options: blue, red, green, yellow, purple, indigo, gray.
size string md Bar height size. Options: xs, sm, md, lg, xl.
outside-label string|null null Label text displayed above the progress bar with percentage on the right.
inside-label string|null null Label text displayed inside the progress bar.