✅ CSS to make progress bars green when complete

Community Resources
1

If you’re on the Business Plan and leverage progress bars in your app, here’s a neat code snippet that colors a progress bar green when it’s reached 100%.

Note: might need to specify a custom class on the progress bar component first and reference it in the CSS because I’m not sure what other components have the styling identifier listed below.

image
image2730×606 69.1 KB

[style="transform: translateX(0%);"] {
background-color: #00b703 !important;
}

This CSS needs to be placed in the Settings → Appearance → Custom CSS box

15 Likes
2

Neat! Do you have any ideas how to change the color of a Progress Bar in General ?

3

An alternative to a CSS solution is to build your own and give it any color you want.

1 Like
4

Is there a way to change the color for when it is not fulfilled? i.e. red for not, and then green like you have it when it is

5

Sure. It’s all about building a template column with the code and plug in the Width and Color as replacement values in the template.

6

Could you provide an example? That would be amazing!

7

He did provide an example :point_down:

1 Like
8

What do you need help with? Are you familiar the template column? Here’s a modified version with variables instead of hard codes values for the color and percent. Just put it in a template column and set up your replacement values for the variables. {{color}} and {{percent}}

Once that is done, display it with a Rich Text component.

<div style="overflow:hidden;border-radius:15px;background-color:#DDDDDD;"">
  <div style="border-radius:15px;background-color:{{color}};height:15px;width:{{percent}}%">
  </div>
</div>
4 Likes
9

Is this doable in Team plans as well?

10

Yes. Rich text component is available for every plan.

4 Likes