Developer OneChen has a demo project up on GitHub showing how to build a progress circle using basic Firemonkey components. As you can see in the featured image it is a circle with a percentage in the center and a progress line around the inside of the circle. It is composed of a TCircle component with a TArc, a TCircle, and a TText component nested inside of it. These components are available in Delphi XE5, Delphi XE6, C++Builder, and AppMethod. They should also work on all four platforms (Android, IOS, Windows, and OSX) The TArc makes up the white line on the inside that appears to move around the circle. The round ends of the TArc are achieved by changing the Stroke Cap property to Round instead of Flat. The progress of the line is controlled by simply changing the angle of the TArc component. As you change the angle the line appears to move around the circle. Other notable properties of the effect are Stroke Thickness which controls the size of the line and it is set at 15. And lastly the StartAngle property of the TArc is set to -90. The TCircle in the center is just set to align Client and so is the TText which contains the percentage. The object is built up using other objects so it would be easy to customize the colors to your needs. You could also easily include this code with a TTimer or anonymous thread to replace TAniIndicator if that component doesn’t suite your needs. Here is the code that handles the progress setting of the TArc component:
procedure TForm1.TrackBar1Change(Sender: TObject);
begin
if TrackBar1.Value <> 0 then
Arc1.EndAngle := 360 / (100 / TrackBar1.Value)
else Arc1.EndAngle := 0;
Text1.Text := Trunc(TrackBar1.Value).ToString + '%';
end;
Head over and check out the full Delphi XE6 Firemonkey progress circle demo project and download it from GitHub.
