Progress Bar Reference

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;
}