The Progress Circle element displays progress rates in a circular format. It provides users with a visual summary of the process in scenarios such as task completion, project progress, or KPI tracking.

Supported on both web and mobile applications.

Use Cases

• Displaying project completion rates,
• Tracking the progress of individual tasks,
• Visualizing the extent to which performance targets have been achieved,
• Presenting KPI measurements with a simple pie chart, etc.

Task Completion

In a project management application, the completion percentage of tasks assigned to the user is visualized with the Progress Circle.

• The task completion percentage is obtained via the Datasource.
• The percentage value is displayed inside the circle.
• Progress is presented more dynamically with a gradient color transition.

1) Static Usage Scenario

Example Scenario – Fixed Percentage

The Progress Circle always displays a fixed percentage on a user profile screen.

• Datasource: Not required
• Percent: 65
• Colors: Green
• Show Percentage: true

The user always sees 65% fullness inside the circle.

UI Design Operations

1. Add the Progress Circle element.
2. Enter 65 as the Percent value in the Properties panel.
3. Customize the colors with First Gradient Color and Second Gradient Color.

Using Properties

• Percent → 65 → 65% full circle
• Gradient Colors → Start: #00BFFF, End: #28a745
• Show Percentage → Active → 65% visible in the center

2) Dynamic Usage Scenario

Example Scenario – Task Completion Tracking

In a project management application, the task completion rate of users is displayed with the Progress Circle.

• Datasource: TaskProgress table
• Percent: Automatically retrieved from the Progress column

Connecting the Data Source

1. Go to the Datasources module.
2. Click Tables > + and name the table TaskProgressCircle.
3. Create the following table.

4. Click SQL Actions and name the action TaskProgressCircle.
5. Enter the following SQL command.

SELECT ‘UI Design Screens’ AS TaskName, 40 AS ProgressUNION ALLSELECT ‘API Integration’, 65UNION ALLSELECT ‘Testing & QA’, 85

UI Design Operations

1. On the application screen, click the Add Action button on the right side → Custom > TaskProgress.
2. Click the Progress Circle element you added to the screen.
3. Link the TaskProgress action from the Percent field.

Using Properties

• Percent → Gets dynamic values from the Progress column
• Gradient Colors → Enhances visual appeal with color transitions
• Show Percentage → Dynamic values appear in the center

When the Scenario Step is Complete

• The circle appears 40%, 65%, or 85% full.
• The percentage value is displayed in the center of the circle.
• The user can instantly see what stage of progress is being made.

Limitations

• Percent value only works in the 0–100 range.
• Show Percentage feature only displays text in the center in web applications.
• When too many tasks are linked, it may be necessary to add a separate Progress Circle for each task.