The Progress Bar element allows you to visually show users the progress of processes. It is used for loading statuses, task completion rates, survey progress, or multi-step workflows.

Supported in web and mobile applications.

Usage Areas

• Displaying file upload progress,
• Tracking task or project completion percentage,
• Creating a survey or exam progress bar,
• Visualizing user onboarding steps, etc.

Task Completion Scenario

In a project management application, the percentage of tasks completed by the user is displayed with a Progress Bar. The user can easily track the progress of the process by seeing the fill rate and percentage on the bar.

1) Static Usage Scenario

Example Scenario – Fixed Percentage

On a file upload screen, the Progress Bar always displays a fixed percentage.

• Datasource: Not required
• Percent: 65
• Colors: Green
• Hide Percentage: false

The user always sees a bar that is 65% full.

UI Design Operations

1. Add the Progress Bar element.
2. In the Properties panel, enter 65 as the Percent value.
3. Customize the colors with First Gradient Color and Second Gradient Color.

Using the Properties

• Percent → 65 → 65% full bar
• Gradient Colors → Start: #00BFFF, End: #28a745
• Hide Percentage → If enabled, only the bar is visible

2) Dynamic Usage Scenario

Example Scenario – Task Completion Tracking

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

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

Connecting the Data Source

1. Go to the Datasources module.
2. Click the Tables > + icon and name the table “TaskProgress”.
3. Create the following table.
4. Click SQL Actions and name the action TaskProgress.

SQL Example

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

UI Design Processes

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

Using Properties

• Percent → Takes dynamic values from the Progress column
• Gradient Colors → Enhances visual appeal with color transitions
• Hide Percentage → Option to hide percentage information

When the Scenario Step is Complete

• The bar appears 65% full.
• The percentage value is displayed next to the bar.
• The user can instantly see what stage of progress they are at.

Limitations

• Performance may decrease when multiple Progress Bars are used on the same screen.
• Gradient color support may appear differently on some devices.

Tips and Best Practices

Always link the Percent value to the Datasource; do not leave it static.

• Use contrasting colors such as red for critical tasks and green for tasks nearing completion.
• In mobile applications, a vertical progress bar may be more suitable for narrow spaces.