Weave Code
Filament Progress Bar Laravel Package
devletes/filament-progress-bar
Reusable progress bar components for Filament 5 tables and infolists. Shared API for columns/entries, built-in success/warning/danger thresholds (ascending/descending) or custom state maps, multiple sizes and text positions, dark-mode aware styling, and proper progressbar semantics.
Reusable progress bar components for Filament 5 tables and infolists.
Frequently asked questions about Filament Progress Bar
- How do I install devletes/filament-progress-bar in a Laravel Filament 5 panel?
- Install it with composer require devletes/filament-progress-bar, then run php artisan filament:assets so the package stylesheet is registered with your panel. The package requires PHP ^8.2 and Filament ^5.0. You do not need to edit your custom Tailwind theme because it ships a self-contained stylesheet through Filament’s asset manager.
- Does this package work with Filament 4 or older versions?
- No, the package is built for Filament 5.x and will not work with Filament 4 or earlier versions. Check your composer.json and panel version before installing, and plan an upgrade path if you are still on an older Filament release. Minor Filament 5 updates are generally forward-compatible, but major releases may require package adjustments.
- What is the difference between ProgressBarColumn and ProgressBarEntry?
- ProgressBarColumn is a table column for Filament tables, while ProgressBarEntry is an infolist entry for Filament infolists. Both expose the same shared API for data, thresholds, colors, sizes, and text positions, so behavior stays consistent across tables and detail pages. Use the column in list views and the entry in read-only infolist layouts.
- How do I pass progress data as an array with progress and total?
- Return an array with progress and total keys from getStateUsing or a state closure, for example ['progress' => $record->used, 'total' => $record->total]. Alternatively, pass a numeric value and pair it with maxValue(fn ($record) => $record->quota). The array style is useful when your model exposes used and total fields without a separate max column.
- How do ascending and descending threshold directions work in Filament progress bars?
- Descending means lower values are worse, which fits metrics like fuel level, battery charge, or remaining stock. Ascending means higher values are worse, which fits usage or error counts. You set the direction with thresholdDirection() and then define warning and danger thresholds, such as warningThreshold(80) for a descending fuel gauge.
- Can I customize colors and thresholds beyond the three-tier success, warning, and danger states?
- You can override the default success, warning, and danger colors with CSS color values using the color methods. For more than three states, use the optional threshold map to define any number of named states and thresholds. If your design system uses custom CSS variables, adjust the colors to match your theme.
- Does the package support dark mode and proper accessibility semantics?
- Yes, the stylesheet is dark-mode aware and the component renders with role="progressbar" semantics rather than a plain div. That gives assistive technologies a meaningful progress indicator. If accessibility is critical, test with your target screen readers and confirm ARIA values are exposed as expected.
- Will adding progress bars slow down large Filament tables with many rows?
- The package adds only UI components and a stylesheet, with no database queries or business logic of its own. Per-row closures for dynamic colors or values add some runtime overhead, so avoid overly complex closures inside large tables. Benchmark a representative page if you render hundreds of progress bars per request.
- How do I show percentage and progress value text, and control size and text position?
- Use showProgressValue() to display the raw value and showPercentage() to display a percentage, depending on what your users need. The component offers three sizes, two text positions, and a custom border radius. These options are available on both ProgressBarColumn and ProgressBarEntry.
- Is devletes/filament-progress-bar maintained, and what are the alternatives?
- The package is published on Packagist and GitHub under the devletes vendor, so check the repository for the latest release, stars, and download counts before adopting it. If your threshold logic goes beyond three-tier or map-based states, you may need a custom Blade view or a more specialized package. For most Filament 5 admin panels, the built-in threshold map covers common progress states without extra customization.
Weaver
How can I help you explore Laravel packages today?