Progress Bar

A progress bar is a graphical control element utilized to represent the progress of a prolonged computer operation, like downloading, file transferring, or installing. Occasionally, the graphic is accompanied by a textual representation of progress in a percentage format. When the progress of the task cannot be determined, it could be expressed as a percentage in the progress bar.

Working with Progress Bar

1. Create a form with a ‘Progress Bar’, as shown below:

Figure1

2. In the general properties section of the properties tab, users can set the Default Value, Max Value, Show Text, Text, and Use MultiColor options.

Figure2: General properties

Default Value and Max Value

The Default Value and Max Value define the progress range for a single criterion. 

Figure 3

Example: If the Default Value is 75 and the Max Value is 100, the progress bar displays 75% progress. 

Figure 4: Default Value and Max Value preview

Example 2: Show Text is set to True, and Text is set to “In Progress”. 

   Figure 5

Use MultiColor

When the Use Multi Color option is enabled, the Configure option becomes available.

• Click the Settings icon in the Configure column.
• The Progress Bar Configuration window opens.
• Configure the following properties for each progress segment:
  • Progress Color
  • Font Weight
  • Font Color
  • Percentage
  • Text
• Click OK to save the configuration.

Figure 7

The configuration of a multicolor progress bar is used to visually represent the progress of multiple criteria.

Figure 8: Progress bar configuration window

In the Progress Bar Configuration window, the total percentage must equal 100. If the total is not 100, a warning message is displayed, and the configuration cannot be saved until the percentages are adjusted to total 100.

Figure9: Warning message

Figure 10

After clicking the ‘OK’ button, the applied configuration values will appear in the progress bar.

Figure 11: Preview_multicolor

3: In the Properties Tab, users have the ability to adjust parameters such as width, height, progress color, border color, border thickness, box shadow, etc. (See Figure 12)

Figure 12

Designer Properties

Here is the list of available properties in the progress bar from the designer: