Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Progress Bar Reference

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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 Progress Bar pattern into the preview.

    3. Set the Value of the Progress Bar'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?