Skip to content




TTMSFNCWidgetArrow displays an arrow that changes color depending on its angle set in the Value property. The Value (angle) can be set to minimum -90 degrees and maximum +90 degrees. The minimum value corresponds to a Pointing Down arrow and maximum value corresponds to a Pointing Up arrow. As the Value (angle) changes from -90 to 0 to +90, the color of the arrow changes from Red to Yellow to Green. This is shown in the screenshots at various Values as the arrow rotates and changes color. This can be a useful visual indication of a progress from Red (starting) to Green (Finished).


  • Impressive display of status of a process with an arrow that goes from Down to Up direction with a color that changes continuously with the changing direction of the arrow
  • Option to display either the angle or a status text by the side of the arrow
  • Properties to customize the color of the arrow at the -90, 0 and +90 angle positions. The arrow automatically uses intermediate colors at intervening angle positions.
  • Properties to customize the shape of the arrow by the ArrowOptions property group.
  • Option to display a Caption text at the top or bottom


A Demo is included in the source in a subfolder “Demo\WidgetArrow.” This Demo uses the WidgetArrow to show the overall progress of a backup operation. With each click of the button “Update Status,” the backup progresses, and the arrow goes from the Down to Right, then to Up position, changing its color from Red to Yellow to Green.


Code Snippets

Set a Value (angle) based on a percent progress value

TMSFNCWidgetArrow1.Value := Round(GetArrowValue(TMSFNCWidgetProgress1.Value));
Where the function GetArrowValue is
function GetArrowValue(APosition: Single): Single;
  result := -90 + (APosition / 100.0) * 180;

Change the shape of the arrow

TMSFNCWidgetArrow1.ArrowOptions.Margin := 10;
TMSFNCWidgetArrow1.ArrowOptions.Width := 30;
TMSFNCWidgetArrow1.ArrowOptions.HeadWidth := 60;
TMSFNCWidgetArrow1.ArrowOptions.HeadLength := 60;