← Back to Index

TFlexFMXProgressBar

Bootstrap-style horizontal progress bar with multiple styles and animation support.

Key Properties

Value: Single
Current progress value (0 to Max).

Min / Max: Single
Minimum and maximum range values (default: 0-100).

ShowText: Boolean
Display percentage text inside bar.

BarColor: TAlphaColor
Progress bar fill color.

BackgroundColor: TAlphaColor
Background track color.

Striped: Boolean
Show diagonal stripe pattern.

Animated: Boolean
Animate stripes (requires Striped = True).

BarHeight: Single
Height of the progress bar.

CornerRadius: Single
Rounded corners radius.

CSS Classes

progress-bar - Base progress bar
progress-bar-success - Green success bar
progress-bar-info - Blue info bar
progress-bar-warning - Yellow warning bar
progress-bar-danger - Red danger bar
progress-bar-striped - Striped pattern
progress-bar-animated - Animated stripes

Usage Examples

Basic Progress

ProgressBar1.Max := 100;
ProgressBar1.Value := 45;
ProgressBar1.ShowText := True;

Success Bar

ProgressBar1.FlexFMXCSS.Text := 'progress-bar-success';
ProgressBar1.Value := 100;

Animated Striped

ProgressBar1.FlexFMXCSS.Text := 'progress-bar-striped progress-bar-animated';
ProgressBar1.Striped := True;
ProgressBar1.Animated := True;

Download Progress

procedure UpdateDownloadProgress(BytesReceived, TotalBytes: Int64);
begin
  ProgressBar1.Max := TotalBytes;
  ProgressBar1.Value := BytesReceived;
end;

Notes

Percentage is automatically calculated from Value/Max ratio
Use animated stripes for indeterminate progress
Supports smooth value transitions via AnimateValue method
ColorScheme integration for automatic theming

← Back to Index