Circular Progress Bar

The Circular Progress Bar widget is used to represent the progress of any task linearly. It is displayed in a Circle shape.

You can use the Circular Progress Bar widget to build a UI that shows downloading/uploading of files, sales this week, hours spent, overall score, etc.

Adding Circular Progress Bar

Here's how you can add the Circular Progress Bar widget to your project:

1. Select the Circular Progress Bar widget from the Add Widget Button or add it directly from the widget tree.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Widget Properties section to customize it.

Customizing Circular Progress Bar

The Widget Properties Panel can be used to customize the appearance and behavior of the Circular Progress Bar.

Changing Stroke Width

You can change the default Width of the Indicator using this property.

To change the Stroke Width of the Circular Progress Bar:

1. Select Circular Progress Bar from the widget tree.

2. Move to the Property Editor (on the right side of your screen).

3. Find the Stroke Width property and enter the desired values.

Changing Stroke Align

To change the alignment of the Indicator:

1. Select Circular Progress Bar from the widget tree.

2. Move to the Property Editor (on the right side of your screen).

3. Find the Stroke Align property and enter the value.

Changing Stroke Cap

You can customize the styles to use for line endings.

To change the Stroke Cap:

1. Select Circular Progress Bar from the widget tree.

2. Move to the Property Editor (on the right side of your screen).

3. Select the Stroke Cap from the Dropdown menu.

   1. Square This will begin and end contours with a half square extension.
   2. Butt This will begin and end contours with a flat edge and no extension.
   3. Rounded This will begin and end contours with a semi-circle extension.

      

Common customization

There are some common customizations that you can make on both Circular and Linear ProgressBar, such as Background Color, Indicator Color, Animation Duration, Animation End Length, Border Radius and Curve (Animation). You can find the details here.