← Back to Index
TFlexFMXProgressCircle
Circular progress indicator with percentage display and customizable appearance.
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 in center.
CircleColor: TAlphaColor
Progress circle fill color.
BackgroundColor: TAlphaColor
Background circle color.
CircleWidth: Single
Thickness of the progress circle stroke.
StartAngle: Single
Starting angle in degrees (default: -90, starts at top).
ClockWise: Boolean
Progress direction (clockwise or counter-clockwise).
Animated: Boolean
Animate value changes.
AnimationDuration: Single
Animation duration in seconds.
Usage Examples
Basic Circle
ProgressCircle1.Max := 100;
ProgressCircle1.Value := 75;
ProgressCircle1.ShowText := True;
Custom Style
ProgressCircle1.CircleColor := TAlphaColors.Green;
ProgressCircle1.CircleWidth := 12;
ProgressCircle1.BackgroundColor := $20000000; // Semi-transparent
Animated Progress
ProgressCircle1.Animated := True;
ProgressCircle1.AnimationDuration := 0.5;
ProgressCircle1.Value := 90; // Smoothly animates to 90%
Loading Indicator
// For indeterminate loading, continuously update value
procedure TForm1.Timer1Timer(Sender: TObject);
begin
ProgressCircle1.Value := (ProgressCircle1.Value + 5) mod 100;
end;
Notes
- Percentage text automatically scales with circle size
- Use transparent background for overlay effects
- Ideal for dashboards and KPI displays
- ColorScheme integration for automatic theming
- Can be used as a countdown timer (reverse progress)
← Back to Index