How to implement a Progress Bar ?

  Hello everyone !! I am new to Mendix and still figuring a way to build a progress bar widget. It would be great if someone can share a video link or steps to implement a progress bar/circle like making changes in domain model etc.   Thanks and Regards, Abhishek    
2 answers

Hi Abhishek,


Welcome to Mendix and the Mendix-community! Depending on where you need the progressbar, Mendix provides one in some as a standard, for instance in Microflow-setting: 


This is an example of an Action-button, that calls a microflow. 

No need to add or change anything on your Domain-model


I hope you will find this helpfull

Kind regards,



Hi Abhishek. Welcome to mendix indeed. The way Mark describes the implementation of the progress bar is the way to show a standard progress bar, which unfortunately does not show any percentage and is actually more like a spinner or hourglass. If you are looking for implementing a progress bar that does actually show a percentage, which I think is what you are asking, then implement the appstore app “Progress bar”.

After having downloaded the widget (in Studio Pro click the shoopping cart at the top left, search for "Progress bar” and click download) have a look at the documentation of the widget:

Place the widget in the context of an object that has attributes for value and maximum value. If attribute value is not set, the Value static will be used to calculate the progress.

Progress percentage is calculated as follows:

(value / maximumValue) * 100

If the maximum value attribute is not set, the maximum default value is set to Maximum value static.

Depending on the specified bootstrap style (primary, success, info, warning, danger), the progress bar can appear in the associated colors.

For negative progress values, the bar is drawn from right to left.

This widget has one of the most extensive demo sites that I have ever seen: and you can also download that demo-project from git: so you have every example-code at your fingertips.