Give us feedback
Web icon


Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded on 08 August 2022 by 
 (2 ratings)


The MultiColorProgressBar allows you to show up to 7 different stages of progress in a single progress bar (each stage using a respective color). You can also show a legend that shows a simple description of what each stage refers to.
Read more

Key features:

  • Up to 7 different stages displayed visually in a single progress bar;

  • A Legend that displays the percentage and color of the progress bar along with a description that may be provided;

  • Customizable size;

  • Customizable shape;

  • OutSystemsUIWeb dependent (Color, Shape and ProgressBarSize).


  • PercentagesAndColors (mandatory) - A list with all the percentages and colors to be shown. It uses the PercentageAndColor structure defined in the module;

  • HasLegend (mandatory) - If you want the Legend to be shown or not;

  • Shape (non-mandatory) - Use the records from the OutSystemsUIWeb.Shape static entity;

  • Size (non-mandatory) - Use the records from the OutSystemsUIWeb.Size static entity;

This pattern was created because we felt the need to show more than one stage in a single progress bar. As the ProgressBar component from the OutSystemsUIWeb module only supports one stage, we created this pattern.

A list of PercentageAndColor is expected as an input. This way you may control which colors and percentage you want for each stage. You can also add a simple description for each stage to be displayed in a legend, but this is not mandatory.

We use a CSS gradient to show the colors and, because of that, there is a limitation with the amount of stages to show. This version supports up to 7 stages.

The MultiColorProgressBar might come in handy when we want to give the perception of progress divided by multiple stages.


Control your expenses to match a maximum annual budget.

Total expenses in the previous months of the year: 2.000€

Total expenses in the current month: 100€

Total budget for this year: 3.000€

With the MultiColorProgressBar you can show how your are progressing towards your budget but having a view over time of the expenses.  In this case you can view the expenses in the current month (orange) in a different color from the previous months of the same year (red) while tracking the value for the year's budget. The remaining value of the budget will be shown in grey.

Release notes (1.0.1)

Repackaged as OAP and attached usage example.

Reviews (0)