PHPackages devletes/filament-progress-bar - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. devletes/filament-progress-bar ActiveLibrary[Utility & Helpers](/categories/utility) devletes/filament-progress-bar ============================== Reusable progress bar components for Filament 5 tables and infolists. v1.1.0(2mo ago)101.9k↑2218.2%2MITPHPPHP ^8.2CI passing Since Apr 1Pushed 2mo agoCompare [ Source](https://github.com/devletes/filament-progress-bar)[ Packagist](https://packagist.org/packages/devletes/filament-progress-bar)[ Docs](https://github.com/devletes/filament-progress-bar)[ RSS](/packages/devletes-filament-progress-bar/feed)WikiDiscussions main Synced 4w ago READMEChangelog (2)Dependencies (12)Versions (3)Used By (0) Filament Progress Bar ===================== [](#filament-progress-bar) [![Latest Version on Packagist](https://camo.githubusercontent.com/c303596a8167a0fcd32b4053055718ead0a16028084d9f843e5391ea85235287/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6465766c657465732f66696c616d656e742d70726f67726573732d6261722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/devletes/filament-progress-bar)[![Total Downloads](https://camo.githubusercontent.com/ad7e6054a0641b914ce17eb861633b6d532ca0b610edb7d23056d2280eab4b30/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6465766c657465732f66696c616d656e742d70726f67726573732d6261722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/devletes/filament-progress-bar)[![License](https://camo.githubusercontent.com/3f9ce0d3b1fb8c42736ec8a5187fa5306be2086ed76081d9e74044eeebe9878b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6465766c657465732f66696c616d656e742d70726f67726573732d6261722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/devletes/filament-progress-bar)[![GitHub Stars](https://camo.githubusercontent.com/40ddac28035c7131daf79de129817394b00abb07f019d33207d622a2d6c4e75f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6465766c657465732f66696c616d656e742d70726f67726573732d6261723f7374796c653d666c61742d737175617265)](https://github.com/devletes/filament-progress-bar/stargazers) Reusable progress bar components for Filament 5 tables and infolists. - Single shared API across `ProgressBarColumn` and `ProgressBarEntry` - Three-tier (success / warning / danger) coloring out of the box, with custom colors via CSS values - `ascending` and `descending` threshold directions for low-is-bad metrics (fuel, stock, battery) - Optional threshold *map* for any number of states with custom names - Three sizes, two text positions, custom border radius - Self-contained stylesheet, dark-mode aware - Proper `role="progressbar"` semantics Requirements ------------ [](#requirements) - PHP `^8.2` - Filament `^5.0` Installation ------------ [](#installation) ``` composer require devletes/filament-progress-bar ``` Then publish Filament assets so the package stylesheet is available to your panel: ``` php artisan filament:assets ``` The package ships its own stylesheet via Filament's asset manager — there is nothing to add to your custom Tailwind theme. Quick start ----------- [](#quick-start) ### Table column [](#table-column) ``` use Devletes\FilamentProgressBar\Tables\Columns\ProgressBarColumn; ProgressBarColumn::make('used') ->maxValue(fn ($record) => $record->quota) ->showProgressValue() ->showPercentage(); ``` ### Infolist entry [](#infolist-entry) ``` use Devletes\FilamentProgressBar\Infolists\Components\ProgressBarEntry; ProgressBarEntry::make('leave_progress') ->label('Sick Leave') ->icon('heroicon-o-heart') ->iconColor('primary') ->getStateUsing(fn ($record) => [ 'progress' => $record->leave_used, 'total' => $record->leave_total, ]); ``` Providing data -------------- [](#providing-data) The component accepts two styles of state: **1. A numeric value paired with `maxValue(...)`:** ``` ProgressBarColumn::make('used') ->maxValue(fn ($record) => $record->quota); ``` **2. A structured array containing both the current value and the total:** ``` ProgressBarColumn::make('leave_progress') ->state(fn ($record) => [ 'progress' => $record->used_days, 'total' => $record->allocated_days, ]); ``` When the structured form is used, both keys are looked up flexibly. The first matching key wins: RoleAccepted keysCurrent value`progress`, `current`, `value`, `used`Total`total`, `max`, `available`, `quota`A missing or zero total resolves to `0%` rather than throwing. Display ------- [](#display) ### Size [](#size) Method: `size('sm' | 'md' | 'lg')` Controls the bar height and inside-text size. Defaults to `sm`. Invalid values fall back to the default. [![Sizes (light)](docs/images/sizes_light.png)](docs/images/sizes_light.png)[![Sizes (dark)](docs/images/sizes_dark.png)](docs/images/sizes_dark.png)### Text position [](#text-position) Method: `textPosition('inside' | 'outside')` - **`inside`** *(default)*: the value/percentage is rendered on top of the fill, centered horizontally. Best for compact rows where you want the number visually anchored to the bar. - **`outside`**: the value/percentage is rendered in a row beneath the bar, right-aligned. Best when you want a clean bar visual without text overlap, or when the value would be hard to read at low percentages. [![Text position (light)](docs/images/text_position_light.png)](docs/images/text_position_light.png)[![Text position (dark)](docs/images/text_position_dark.png)](docs/images/text_position_dark.png)### Show / hide value & percentage [](#show--hide-value--percentage) Methods: `showPercentage()` / `hidePercentage()` / `showProgressValue()` / `hideProgressValue()` Toggle each portion of the display text independently. When both are visible the text reads `value / max (percentage)`. When only one is visible it appears alone. When both are hidden the bar renders without any text. [![Visibility (light)](docs/images/visibility_light.png)](docs/images/visibility_light.png)[![Visibility (dark)](docs/images/visibility_dark.png)](docs/images/visibility_dark.png)### Border radius [](#border-radius) Method: `borderRadius(string $value)` Override the bar's corner radius with **any valid CSS length** — pixels, rems, percentages, custom properties, or `calc()` expressions: ``` ->borderRadius('4px') ->borderRadius('0.5rem') ->borderRadius('calc(var(--radius) * 2)') ``` Pass `null` (or omit the call) to keep the default pill shape (`9999px`). [![Border radius (light)](docs/images/border_radius_light.png)](docs/images/border_radius_light.png)[![Border radius (dark)](docs/images/border_radius_dark.png)](docs/images/border_radius_dark.png)> Values containing `;`, ``, `{`, `}`, or quotes are silently dropped to prevent inline-style injection. Stick to standard CSS length syntax. Thresholds and coloring ----------------------- [](#thresholds-and-coloring) The bar resolves a **status** from the percentage and renders a color for that status. Two threshold APIs are available — start with the simple one and reach for the map only when three states aren't enough. ### Three-state mode (default) [](#three-state-mode-default) `success` → `warning` → `danger`, with thresholds you can tune individually: ``` ProgressBarColumn::make('cpu') ->warningThreshold(70) // ≥ 70% → warning ->dangerThreshold(90); // ≥ 90% → danger ``` Defaults: `warning = 70`, `danger = 90`. [![Default three-state thresholds (light)](docs/images/thresholds_default_light.png)](docs/images/thresholds_default_light.png)[![Default three-state thresholds (dark)](docs/images/thresholds_default_dark.png)](docs/images/thresholds_default_dark.png)### Threshold direction [](#threshold-direction) By default higher percentages escalate toward danger (CPU, memory, used quota). For metrics where **lower is worse** (fuel, stock, battery), flip the direction: ``` ProgressBarColumn::make('battery_percent') ->thresholdDirection('descending') ->warningThreshold(30) // ≤ 30% → warning ->dangerThreshold(10); // ≤ 10% → danger ``` In descending mode the package uses sane defaults (`warning = 30`, `danger = 10`) and clamps `danger ≤ warning`. [![Descending direction (light)](docs/images/thresholds_descending_light.png)](docs/images/thresholds_descending_light.png)[![Descending direction (dark)](docs/images/thresholds_descending_dark.png)](docs/images/thresholds_descending_dark.png)### Threshold map (advanced) [](#threshold-map-advanced) For more than three states, or for non-monotonic mappings, pass a map of `floor => status`. The status name can be anything you want: ``` ProgressBarColumn::make('score') ->thresholds([ 80 => 'success', 60 => 'warning', 40 => 'info', 0 => 'danger', ]); ``` Keys are interpreted as **percentage floors** — the highest matching floor wins. The example above maps `≥80` to `success`, `60–79` to `warning`, `40–59` to `info`, and ` 'success', 10 => 'info']` resolves `0–79` to `info` (no implicit `success` fallback below the lowest floor). The three legacy statuses — `success`, `warning`, `danger` — keep their package defaults (`var(--primary-500)`, `var(--warning-500)`, `var(--danger-500)`). Any other status name (e.g. `info`, `gray`, `secondary`, or a custom one registered via your panel's `->colors([...])`) auto-resolves to `var(--{status}-500)`. No extra configuration needed. For one-off colors that don't map to a Filament color (e.g. you want a specific `'excellent'` status to be a particular shade of green), use `statusColors([...])`: ``` ->statusColors([ 'excellent' => 'rgb(16 185 129)', ]) ``` Likewise, custom labels for any status name go through `statusLabels([...])`: ``` ->statusLabels([ 'info' => fn (int $percentage) => "Watch ({$percentage}%)", ]) ``` ### Colors [](#colors) Three named setters cover the default statuses. Each accepts any CSS color value or a closure: ``` ->successColor('rgb(16 185 129)') ->warningColor(fn ($record) => $record->is_critical ? '#ff0000' : 'orange') ->dangerColor('var(--my-danger-color)') ``` Defaults reference Filament's CSS variables (`var(--primary-500)`, `var(--warning-500)`, `var(--danger-500)`), so the bar inherits your panel's theme automatically. For custom statuses (map mode), use `statusColors([...])`. When both `statusColors` and the named setters define the same status, the map wins — named setters fill in any keys the map omits. ### Labels [](#labels) Per-status labels are shown above the bar in **infolist entries only** (table columns intentionally skip them for compact rows). They accept a string or a closure receiving useful context: ``` ->successLabel('On track') ->warningLabel(fn (int $percentage) => "Watch ({$percentage}%)") ->dangerLabel(fn (float $current, ?float $total) => "{$current} / {$total} used") ``` For custom statuses (map mode), use `statusLabels([...])`. Closure parameters ------------------ [](#closure-parameters) Most setters accept a closure. The following parameters are injected when present: - `$state` — the raw column/entry state - `$record` — the Eloquent model - `$current` — the resolved current value (float) - `$total` — the resolved total (float|null) - `$percentage` — the integer percentage (0–100) - `$status` — the resolved status name The percentage- and status-aware parameters are populated *after* the bar's value has been resolved, so closures used for colors and labels can branch on the final percentage. Recipes ------- [](#recipes) **Battery / fuel (low is bad):** ``` ProgressBarColumn::make('battery_percent') ->thresholdDirection('descending') ->warningThreshold(30) ->dangerThreshold(10); ``` [![Battery recipe (light)](docs/images/recipe_battery_light.png)](docs/images/recipe_battery_light.png)[![Battery recipe (dark)](docs/images/recipe_battery_dark.png)](docs/images/recipe_battery_dark.png)**Multi-state quality score** (using Filament's built-in colors): ``` ProgressBarColumn::make('quality') ->thresholds([ 90 => 'success', 70 => 'info', 40 => 'warning', 0 => 'danger', ]); ``` [![Quality recipe (light)](docs/images/recipe_quality_light.png)](docs/images/recipe_quality_light.png)[![Quality recipe (dark)](docs/images/recipe_quality_dark.png)](docs/images/recipe_quality_dark.png)**Squared bars matching a card design system:** ``` ProgressBarColumn::make('used') ->maxValue(fn ($record) => $record->quota) ->borderRadius('4px') ->size('md'); ``` [![Squared bars recipe (light)](docs/images/recipe_squared_light.png)](docs/images/recipe_squared_light.png)[![Squared bars recipe (dark)](docs/images/recipe_squared_dark.png)](docs/images/recipe_squared_dark.png)**Compact column without any text overlay:** ``` ProgressBarColumn::make('leave_progress') ->state(fn ($record) => [ 'progress' => $record->leave_used, 'total' => $record->leave_total, ]) ->hideProgressValue() ->hidePercentage(); ``` [![Compact recipe (light)](docs/images/recipe_compact_light.png)](docs/images/recipe_compact_light.png)[![Compact recipe (dark)](docs/images/recipe_compact_dark.png)](docs/images/recipe_compact_dark.png)**Dynamic per-record color:** ``` ProgressBarColumn::make('progress') ->successColor(fn ($record) => $record->is_priority ? '#7c3aed' : null); ``` **Infolist entry with icon, inline label, and rich danger text:** ``` ProgressBarEntry::make('inventory') ->label('Stock remaining') ->icon('heroicon-o-cube') ->iconColor('primary') ->inlineLabel() ->getStateUsing(fn ($record) => [ 'progress' => $record->stock, 'total' => $record->capacity, ]) ->thresholdDirection('descending') ->warningThreshold(40) ->dangerThreshold(15) ->dangerLabel(fn (float $current, ?float $total) => "Only {$current} left of {$total}"); ``` API reference ------------- [](#api-reference) ### Value [](#value) MethodNotes`maxValue(int|float|Closure|null)`Used with a numeric state value`state(...)` / `getStateUsing(...)`Filament native; pass a structured array for current+total### Display [](#display-1) MethodNotes`size('sm'|'md'|'lg')`Default `sm``textPosition('inside'|'outside')`Default `inside``showPercentage(bool|Closure)` / `hidePercentage(bool|Closure)`Default shown`showProgressValue(bool|Closure)` / `hideProgressValue(bool|Closure)`Default shown`borderRadius(string|Closure|null)`Any CSS length; default pill### Thresholds [](#thresholds) MethodNotes`warningThreshold(int|float|Closure)`Default `70` (or `30` in descending)`dangerThreshold(int|float|Closure)`Default `90` (or `10` in descending)`thresholdDirection('ascending'|'descending'|Closure)`Default `ascending``thresholds(array|Closure)`Tier overrides OR a `[floor => status]` map### Colors [](#colors-1) MethodNotes`successColor(string|Closure|null)`Default `var(--primary-500)``warningColor(string|Closure|null)`Default `var(--warning-500)``dangerColor(string|Closure|null)`Default `var(--danger-500)``statusColors(array|Closure|null)`Map of `status => color` for custom statuses### Labels (infolist entries only) [](#labels-infolist-entries-only) MethodNotes`successLabel(string|Closure|null)`Hidden by default`warningLabel(string|Closure|null)`Hidden by default`dangerLabel(string|Closure|null)`Hidden by default`statusLabels(array|Closure|null)`Map of `status => label` for custom statuses### Infolist-only [](#infolist-only) The `ProgressBarEntry` extends Filament's `Entry` and supports the standard `label(...)`, `inlineLabel()`, `hiddenLabel()`, `icon(...)`, and `iconColor(...)` methods. Integration examples -------------------- [](#integration-examples) A `ProgressBarColumn` rendered inside a Filament resource table: [![Table integration (light)](docs/images/table_column_light.png)](docs/images/table_column_light.png)[![Table integration (dark)](docs/images/table_column_dark.png)](docs/images/table_column_dark.png)A `ProgressBarEntry` inside an infolist with icons, custom labels, and a descending-threshold "Stock remaining" bar: [![Infolist integration (light)](docs/images/infolist_entry_light.png)](docs/images/infolist_entry_light.png)[![Infolist integration (dark)](docs/images/infolist_entry_dark.png)](docs/images/infolist_entry_dark.png)Need something custom? ---------------------- [](#need-something-custom) We build production Filament panels and plugins for teams that want to ship fast without compromising on polish. If you need a custom feature, an extended variant of this package, or a fully bespoke component built for your stack, we can help. - **Browse the rest of our Filament work:** [filament.devletes.com](https://filament.devletes.com) - **Get in touch:** Typical engagements: new Filament plugins, custom resources/widgets/actions, theme + UX work, integrations with your existing services, and one-off tailored forks of our open-source packages. Credits ------- [](#credits) - [Salman Hijazi](https://www.linkedin.com/in/syedsalmanhijazi/) License ------- [](#license) MIT. See [LICENSE.md](LICENSE.md). ### Health Score 46 — FairBetter than 92% of packages Maintenance87 Actively maintained with recent releases Popularity30 Limited adoption so far Community7 Small or concentrated contributor base Maturity47 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~26 days Total 2 Last Release 66d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/0db9372e4286b99db446cceebc313afe89b9af65175a29476c6dfb9a404b9a3a?d=identicon)[devletes](/maintainers/devletes) --- Top Contributors [![salmanhijazi](https://avatars.githubusercontent.com/u/4691666?v=4)](https://github.com/salmanhijazi "salmanhijazi (3 commits)") --- Tags laravelprogressfilamentfilament-plugininfolistprogress bartable-column ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/devletes-filament-progress-bar/health.svg) ``` [![Health](https://phpackages.com/badges/devletes-filament-progress-bar/health.svg)](https://phpackages.com/packages/devletes-filament-progress-bar) ``` ### Alternatives [ysfkaya/filament-phone-input A phone input component for Laravel Filament 3161.3M25](/packages/ysfkaya-filament-phone-input)[stephenjude/filament-feature-flags Filament implementation of feature flags and segmentation with Laravel Pennant. 122177.8k1](/packages/stephenjude-filament-feature-flags)[schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 34226.4k10](/packages/schmeits-filament-character-counter)[stephenjude/filament-jetstream A Laravel starter kit built with Filament inspired by Jetstream. 17760.2k2](/packages/stephenjude-filament-jetstream)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 84215.9k9](/packages/stephenjude-filament-two-factor-authentication)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3913.7k](/packages/rawilk-profile-filament-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)