Skip to main content

Patterns

 

OutSystems

ProgressBar

Display progress of a task by incrementing values in a bar.

Use the Progress Bar to show the current progress of a task flow. You can also show progress in a Progress Circle or a Progress Circle Fraction. Be consistent when using a pattern to show progress of a task, for instance, if an action displays a linear indicator on one screen, that same action should not use a circular indicator elsewhere in the app.

How to use

Configure the variable that defines the percentage. You can also change the shape, size, orientation and color of the ProgressBar.

  1. Drag the ProgressBar pattern into the preview.

  2. Use a variable to set the percentage value to display.

  3. Set the content in the placeholders.

  4. Publish and test.

Input Parameters

Input Name Description Type Mandatory Default Value
Percentage Percentage to display, you can use functions or local variables. Integer False 50
Color Set the background color. Color Identifier False Entities.Color.Primary
Shape Set the shape. Shape Identifier False Entities.Shape.Rounded
Size Set the size. ProgressBarSize Identifier False Entities.ProgressBarSize.Base
IsInline Set the orientation of the value placeholder. When true, the value placeholder will be placed at the end of the line and the label placeholder is hidden.When False, value and label of the placeholder will be placed over the line. Boolean False False
ExtendedClass Add custom style classes to this Block. Text False none

Layout and Classes

CSS Selectors

Element CSS Class Description
.progress-container .progress-container.flex-direction-column When IsInline parameter is False
.progress-container .progress-container.flex-direction-row When IsInline parameter is False

Advanced Use Case

Change color of progress bar based on value

  1. Create a local Integer variable "Value".

  2. Drag the ProgressBar pattern into the preview.

  3. Set the Value of the ProgressBar's Percentage parameter.

  4. To change the color of your ProgressBar based on values, create a condition and set limits to use color. In this example, 3 colors represent diferent states of progress. Set the Color parameter to If(Value <= 50, Entities.Color.Red, If( Value > 50 and Value < 75, Entities.Color.Yellow , Entities.Color.Green)).

  5. Publish and test.

Change the style of Progress bar

It is possible to change the style of Progress bar by using custom CSS. To implement this in your application, copy the CSS and add it to the theme.

.progress {
    padding: var(--space-s);`
    border: var(--space-xs) solid var(--color-primary);`
}

Remove background of Progress Bar

To remove the background, use this CSS snippet.

.progress {
    background-color: transparent;
}

  • Was this article helpful?