---
title: "Progress Bar V2"
slug: "progress-bar-v2-filter"
updated: 2026-02-25T17:41:03Z
published: 2026-02-25T17:41:03Z
canonical: "learn.servitly.com/progress-bar-v2-filter"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress Bar V2

It renders a percentage value as a progress bar with different colors according to thresholds.

![Progress Bar V2](https://components-manager.servitly.com/components/ProgressBarV2_1/IMAGES/_screenshot?owner=AG_Servitly)

This filter is parametric, so you can define how the progress bar should be displayed directly in the template.

Progress can be displayed as a simple bar (Show Details = false) and in this case the percentage is displayed directly in the bar. This layout fits well when used within lists, as it takes up little vertical space.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(675).png?sv=2026-02-06&spr=https&st=2026-10-16T17%3A59%3A56Z&se=2026-10-16T18%3A59%3A56Z&sr=c&sp=r&sig=m22LmXDWHfGKX1KFBOF6rzQO7jgMHdXIoVoGkNHIwvI%3D)

You can define whether to use a single color or to use a color based on thresholds. For example, using the *Bad to Good* color style, when the value is below the *Lower Threshold* (default 20%) the bar is red, if it is below the *Upper Threshold* (default 80%) the bar is orange, otherwise it is green.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(676).png?sv=2026-02-06&spr=https&st=2026-10-16T17%3A59%3A56Z&se=2026-10-16T18%3A59%3A56Z&sr=c&sp=r&sig=m22LmXDWHfGKX1KFBOF6rzQO7jgMHdXIoVoGkNHIwvI%3D)

Optionally, it can be defined whether to display details below the bar, in case the partial and total values are not themselves percentages.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(677).png?sv=2026-02-06&spr=https&st=2026-10-16T17%3A59%3A56Z&se=2026-10-16T18%3A59%3A56Z&sr=c&sp=r&sig=m22LmXDWHfGKX1KFBOF6rzQO7jgMHdXIoVoGkNHIwvI%3D)

# Filter Variants

The set of predefined filter variants that can be used to format values.

| *Progress Bar V2* | Displays a progress bar given a value (0 to 100). Optionally if applied to a composite-part, the partial and total value can be defined. **Name**: *progressBarV2* **Input Types**: *INTEGER, FLOAT, NUMBER, COMPOSITE_PART* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/ProgressBarV2_1/IMAGES/variants/progressBarV2/_image?owner=AG_Servitly) **Parameters** `progressBarV2:{"showDetails": true, "colorStyle": BAD_TO_GOOD, "colorClass": "#007BFF", "threshold1": 123, "threshold2": 123, "total": 123, "valueUnit": "abc"}` \| *Show Details* \| If selecte, under the bar prints out the paratial value, the total value and the percentage. **Name**: showDetails **Type**: BOOLEAN \\| Optional **Default Value**: *false* \| \| --- \| --- \| \| *Color Style* \| The style used to color the bar according to the percentage. **Name**: colorStyle **Type**: ENUM \\| Optional **Values**: *BAD_TO_GOOD*, *GOOD_TO_BAD*, \| \| *Color Class* \| The fixed bar color class. **Name**: colorClass **Type**: STRING \\| Optional **Default Value**: *bg-gray* \| \| *Lower Threshold* \| The lower threshold used for bar coloring according to the selected style. **Name**: threshold1 **Type**: INTEGER \\| Optional \| \| *Higher Threshold* \| The higher threshold used for bar coloring according to the selected style. **Name**: threshold2 **Type**: INTEGER \\| Optional \| \| *Total* \| The static total value used to compute the percentage value. **Name**: total **Type**: INTEGER \\| Optional **Default Value**: *100* \| \| *Value Unit* \| The unit of measurement of the partial and total value displayed in the details. **Name**: valueUnit **Type**: STRING \\| Optional \| |
| --- | --- |
| *Show Details* | If selecte, under the bar prints out the paratial value, the total value and the percentage. **Name**: showDetails **Type**: BOOLEAN \| Optional **Default Value**: *false* |
| *Color Style* | The style used to color the bar according to the percentage. **Name**: colorStyle **Type**: ENUM \| Optional **Values**: *BAD_TO_GOOD*, *GOOD_TO_BAD*, |
| *Color Class* | The fixed bar color class. **Name**: colorClass **Type**: STRING \| Optional **Default Value**: *bg-gray* |
| *Lower Threshold* | The lower threshold used for bar coloring according to the selected style. **Name**: threshold1 **Type**: INTEGER \| Optional |
| *Higher Threshold* | The higher threshold used for bar coloring according to the selected style. **Name**: threshold2 **Type**: INTEGER \| Optional |
| *Total* | The static total value used to compute the percentage value. **Name**: total **Type**: INTEGER \| Optional **Default Value**: *100* |
| *Value Unit* | The unit of measurement of the partial and total value displayed in the details. **Name**: valueUnit **Type**: STRING \| Optional |