ProgressBar widget

Here are the steps to utilize the progress bar widget:

  • Drag and drop the progress bar widget onto the design view, selecting the horizontal type and adjust the widget’s size as needed. The progress bar widget comes with two default layers: Default Track and Filled Track. Add images to these layers - use the Progress Bar background image for the Default Track and the fill bar image for the Filled Track.

ProgressBar Widget - Horizontal :width: 100%

ProgressBar Widget - Horizontal

  • Move to the Advanced tab within the Properties section. In the filled track layer, under Dimensions, set the Width mode to Fixed and enter the width of the Progress Bar widget, and map the Widget Data to the Width option.(For vertical types, adjust the Height mode accordingly.)

Filled Track Layer Properties :width: 100%

Filled Track Layer Properties

Mapping Widget Data :width: 100%

Mapping Widget Data

  • Create a data variable in the EFD, specifying a range from 0 to 100.

Data Variable

Data Variable

  • Map this data variable to the ‘Cur value’ under Advanced properties in the Properties section.

Mapping Data Variable

Mapping Data Variable

  • Export and simulate the project. The progress bar fill will dynamically respond based on the data value, providing a visual representation of progress.

Progress bar in Simulation

Progress bar Simulation