✅ 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>
5 Likes
9

Is this doable in Team plans as well?

10

Yes. Rich text component is available for every plan.

4 Likes
11

Now that CSS is available in all paid plans, is it possible to use CSS to dynamically change the color of progress bars based on multiple values? Below is an example in Airtable, which allows you to customize the color based on the current value. Any help or direction would be greatly appreciated.

image

image

12

You can do that with HTML in Rich Text and a bit of Data Editor logic.

1 Like
13

If you make this post into a feature request here in the forum, I’ll be happy to vote for it!

14

It’s a bit of a convoluted solution, but if you don’t have too many scenarios to “color” the bar, you would be able to get a way with:

  • Adding rich text components with different class names, and only show each rich text component when the progress is of a certain threshold.

  • Build the CSS snippet with different bar colors when each of those rich text component is presented, using :has

1 Like
15

Copying various codes under different conditions using the ITE column will be simpler.

1 Like
16

For everyone thinking about using this sort of CSS Logic. Check out custom component as beta feature or in announcements. Cuz I might already be able to do this. Without the hassle of CSS