ProgressBar - Filament Flex Fields

Summary

Versatile linear progress indicator for uploads, sync status, stepped delivery trackers, and multi-segment bars. Supports animations, gradients, and optional card shell wrapping.


Class	`Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ProgressBar`
State	None — display-only schema component
Playground	`progress-bar` slug in Flex Fields playground
Stylesheet	Lazy `progress-bar` bundle

Basic usage

Simple determinate progress

use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ProgressBar;

ProgressBar::make()
    ->label('Upload progress')
    ->value(65)
    ->max(100)
    ->showValue()
    ->color('success');

Indeterminate loading state

ProgressBar::make()
    ->label('Syncing data...')
    ->indeterminate()
    ->color('primary');

Stepped delivery tracker

ProgressBar::make()
    ->segments([
        ['label' => 'Ordered', 'description' => 'Completed'],
        ['label' => 'Shipped', 'description' => 'In transit'],
        ['label' => 'Delivered', 'description' => 'Pending'],
    ])
    ->activeSegment(1)
    ->activeSegmentProgress(0.5)
    ->color('success');

Configuration API

All methods accept Closure unless noted.

Method	Type	Default	Description
`value(float\|int\|Closure\|null $value)`	Setup	`0`	Current progress value.
`max(float\|int\|Closure $max)`	Setup	`100`	Maximum progress value.
`label(string\|Closure\|null $label)`	Setup	`null`	Header text shown above the track.
`displayValue(string\|Closure\|null $value)`	Setup	`null`	Custom formatted value string (e.g., “3 of 5 files”).
`showValue(bool\|Closure $condition = true)`	Setup	`true`	Show percentage or display value in the header.
`valueBadge(bool\|Closure $condition = true)`	Setup	`false`	Render the value as a pill badge in the header.
`color(string\|Closure\|null $color)`	Setup	`primary`	Semantic color: `primary`, `success`, `warning`, `danger`.
`indeterminate(bool\|Closure $condition = true)`	Setup	`false`	Animated loading bar for unknown progress.
`variant(string\|Closure $variant)`	Setup	`'track'`	`track` (continuous) or `pills` (segmented).
`pillCount(int\|Closure $count)`	Setup	`null`	Number of segments in `pills` variant.
`gradientFrom(string\|Closure\|null $color)`	Setup	`null`	Start color for gradient fill.
`gradientTo(string\|Closure\|null $color)`	Setup	`null`	End color for gradient fill.
`segments(array\|Closure\|null $segments)`	Setup	`null`	Array of step metadata for delivery-tracker mode.
`activeSegment(int\|Closure\|null $index)`	Setup	`null`	0-based index of the active step.
`activeSegmentProgress(float\|Closure $progress)`	Setup	`0.62`	Partial fill (0–1) within the active step.
`segmentThumb(bool\|Closure $condition = true)`	Setup	`auto`	Show a thumb indicator on the active segment.
`startMarker(mixed $icon)`	Setup	`null`	Icon at the beginning of the track.
`currentMarker(mixed $icon)`	Setup	`null`	Icon at the current progress position.
`endMarker(mixed $icon)`	Setup	`null`	Icon at the end of the track.
`remainingTrackStyle(string $style)`	Setup	`'solid'`	Style of unfilled track: `solid` or `dashed`.
`shell(bool\|Closure $condition = true)`	Setup	`false`	Wrap in an elevated card container.
`description(string\|Closure $text)`	Setup	`null`	Subtitle text (requires `shell()`).
`footer(string\|Closure $text)`	Setup	`null`	Footer text (requires `shell()`).
`size(string\|Closure $size)`	Setup	`'md'`	Track height: `sm`, `md`, `lg`.
`animated(bool\|Closure $condition = true)`	Setup	`true`	Animate fill transitions.
`animationDuration(int\|Closure $ms)`	Setup	`400`	Transition duration in milliseconds.

Real-world examples

Animated file upload (Livewire)

ProgressBar::make()
    ->label('Uploading photos')
    ->value(fn () => $this->uploadProgress)
    ->showValue()
    ->animated()
    ->color('primary');

Delivery route with markers

ProgressBar::make()
    ->label('Delivery Status')
    ->value(45)
    ->startMarker('heroicon-o-map-pin')
    ->currentMarker('heroicon-o-truck')
    ->endMarker('heroicon-o-home')
    ->remainingTrackStyle('dashed')
    ->color('success');

Playground

/admin/flex-fields-playground/progress-bar See Playground for setup.

Component	When to use instead
ProgressCircle	Circular or semi-circular progress display.
RatingField	When the “progress” represents a user rating or score.
SegmentControl	For interactive selection between discrete options.

CSS classes (reference)

Class	Role
`fff-progress-bar`	Root container
`fff-progress-bar--{sm\|md\|lg}`	Size variant
`fff-progress-bar--indeterminate`	Indeterminate animation state
`fff-progress-bar--pills`	Pill variant modifier
`fff-progress-bar--segments`	Stepped tracker modifier
`fff-progress-bar--has-shell`	Card shell wrapper active
`fff-progress-bar__track`	Main track background
`fff-progress-bar__fill`	Animated fill element
`fff-progress-bar__marker`	Icon marker wrapper
`fff-progress-bar__segment`	Individual step in tracker mode

​Summary

​Basic usage

​Simple determinate progress

​Indeterminate loading state

​Stepped delivery tracker

​Configuration API

​Real-world examples

​Animated file upload (Livewire)

​Delivery route with markers

​Playground

​Related components

​CSS classes (reference)