Laravel Progress Component

Free · MIT

A horizontal progress bar component with support for colors, sizes, labels, striped patterns, and animation.

A Progress built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::progress>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

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

See the full API, props and live examples in the Progress documentation.

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.

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.