✅ CSS to make progress bars green when complete

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.

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

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


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

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

1 Like

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

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.

Could you provide an example? That would be amazing!

He did provide an example :point_down:

1 Like

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}}%">

Is this doable in Team plans as well?

Yes. Rich text component is available for every plan.