Laravel Radial Progress Component
Free · MITA circular progress indicator with configurable value, size, color, and optional percentage label.
A Radial 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::radial-progress>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::radial-progress :value="65" />See the full API, props and live examples in the Radial Progress documentation.
Overview
The <x-aura::radial-progress> component renders a circular progress ring using SVG. It supports values from 0 to 100, multiple size and color variants, configurable stroke thickness, and an optional centered label showing the percentage.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value |
int|float |
0 |
Current progress value (0-100). |
size |
string |
'md' |
Circle size: sm, md, lg, xl. |
color |
string |
'primary' |
Color variant: primary, success, danger, warning, info. |
showLabel |
bool |
true |
Show the percentage label in the center. |
thickness |
int |
4 |
Stroke width of the progress ring in pixels. |
See more examples and every variant in the Radial Progress documentation.