Skip to content




TTMSFNCWidgetProgress displays the progress of a process graphically in the form of a circle. To use this control, just drop it on a form and use the Value property to show the progress.


  • Easy to use, just set the Value property to set the progress
  • Option to animate the display of change in progress value
  • Properties to customize the ValueIndicator on the circle by a filled circle (dot) or a custom bitmap. The second control in the demo screenshot above shows a custom bitmap.
  • Option to display a Caption text at the top or bottom
  • Properties to customize the font and format of the displayed value
  • Properties to customize the fill colors and thickness of the finished and unfinished portion of the progress circle
  • Properties to change the circle extent by specifying the Start and End angles
  • Properties to show tick marks around the circle with bigger starting and ending tick marks (similar to a meter) with their own captions

When you set a caption, the size of the widget is reduced to make space for the caption.

Code Snippets

Set a progress value

 TMSFNCWidgetProgress1.Value := 45;

Set the caption

 TMSFNCWidgetProgress1.CaptionOptions.Text := 'Server Dallas';

Show a bitmap as the ValueIndicator

The BitmapContainer was already added to the form in the Designer with the desired BlueBall named bitmap:

 TMSFNCWidgetProgress2.BitmapContainer := TMSFNCBitmapContainer1;
 TMSFNCWidgetProgress2.ValueIndicator.BitmapName := 'BlueBall';
 TMSFNCWidgetProgress2.ValueIndicator.Kind := piBitmap;


Change the color scheme

 TMSFNCWidgetProgress1.Value := 30;
 TMSFNCWidgetProgress1.Fill.Color := gcNavy;
 TMSFNCWidgetProgress1.Fill.ColorTo := gcRoyalBlue;
 TMSFNCWidgetProgress1.Fill.Kind := gfkGradient;
 TMSFNCWidgetProgress1.CircleOptions.Fill.Color := gcWhite;
 TMSFNCWidgetProgress1.CircleOptions.Fill.ColorTo := gcPowderBlue;
 TMSFNCWidgetProgress1.CircleOptions.Fill.Kind := gfkGradient;
 TMSFNCWidgetProgress1.CircleOptions.UnfinishedFill.Color := gcNavy; 
 TMSFNCWidgetProgress1.CircleOptions.Thickness := 5;
 TMSFNCWidgetProgress1.CircleOptions.UnfinishedThickness := 5;
 TMSFNCWidgetProgress1.ValueIndicator.Fill.Color := gcPowderBlue;
 TMSFNCWidgetProgress1.ValueFont.Color := gcPowderBlue;
 TMSFNCWidgetProgress1.Tickmarks.Count := 10;
 TMSFNCWidgetProgress1.Tickmarks.Stroke.Color := gcPowderBlue;
 TMSFNCWidgetProgress1.Tickmarks.Size := 12;


Make a half circle

 TMSFNCWidgetProgress1.CircleOptions.StartAngle := -90;
 TMSFNCWidgetProgress1.CircleOptions.EndAngle := +90;