# ✅ CSS to make progress bars green when complete **URL:** https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582 **Category:** Community Resources **Tags:** custom-css **Created:** [September 27, 2023, 10:26pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582 "2023-09-27T22:26:59Z") **Posts on this page:** 16 **Page:** 1
### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto) #### Post date: [September 27, 2023, 10:26pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/1 "2023-09-27T22:26:59Z")
If you’re on the [Business Plan](https://join.glideapps.com/plans-and-pricing) 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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/68518805dcd8cf9285dc1c9a28f4e0c876f73bff.jpeg) ```auto [style="transform: translateX(0%);"] { background-color: #00b703 !important; } ``` This CSS needs to be placed in the Settings → Appearance → Custom CSS box ---
### Author: ![Killko](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/killko/32/39538_2.png) [@Killko](https://community.glideapps.com/u/Killko) #### Post date: [February 29, 2024, 8:51pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/2 "2024-02-29T20:51:43Z")
Neat! Do you have any ideas how to change the color of a Progress Bar in General ? ---
### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager) #### Post date: [February 29, 2024, 8:58pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/3 "2024-02-29T20:58:47Z")
An alternative to a CSS solution is to build your own and give it any color you want. > [@Why are certain features not available for Glide pages?](https://community.glideapps.com/t/why-are-certain-features-not-available-for-glide-pages/54249/7): > > @Robert_Petitto here is an alternative to a progress bar. \
\
\ \ ---
### Author: ![Myles\_Chaput](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/myles_chaput/32/62176_2.png) [@Myles\_Chaput](https://community.glideapps.com/u/Myles_Chaput) #### Post date: [February 29, 2024, 10:44pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/4 "2024-02-29T22:44:10Z")
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 ---
### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager) #### Post date: [February 29, 2024, 11:28pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/5 "2024-02-29T23:28:26Z")
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. ---
### Author: ![Myles\_Chaput](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/myles_chaput/32/62176_2.png) [@Myles\_Chaput](https://community.glideapps.com/u/Myles_Chaput) #### Post date: [March 1, 2024, 12:38am UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/6 "2024-03-01T00:38:33Z")
Could you provide an example? That would be amazing! ---
### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy) #### Post date: [March 1, 2024, 1:55am UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/7 "2024-03-01T01:55:06Z")
He did provide an example 👇 > [@Why are certain features not available for Glide pages?](https://community.glideapps.com/t/why-are-certain-features-not-available-for-glide-pages/54249/7): > > @Robert_Petitto here is an alternative to a progress bar. \
> > > [[image]](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/9922cdddc92e130e90a2446d98ab0c41785b2a13.png) ---
### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager) #### Post date: [March 1, 2024, 2:49am UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/8 "2024-03-01T02:49:13Z")
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. ```auto
``` ---
### Author: ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis) #### Post date: [March 2, 2024, 6:45pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/9 "2024-03-02T18:45:10Z")
Is this doable in Team plans as well? ---
### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto) #### Post date: [March 2, 2024, 7:06pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/10 "2024-03-02T19:06:29Z")
Yes. Rich text component is available for every plan. ---
### Author: ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis) #### Post date: [June 11, 2024, 1:47pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/11 "2024-06-11T13:47:07Z")
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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/62bfb5d240f6b742092d3d06cbd704128e7cfe22.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/5/f50d66e9144e4fbbea5e068c5dc355fe5d061a10.png) ---
### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy) #### Post date: [June 11, 2024, 1:59pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/12 "2024-06-11T13:59:48Z")
You can do that with HTML in Rich Text and a bit of Data Editor logic. ---
### Author: ![NFNHello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nfnhello/32/3371_2.png) [@NFNHello](https://community.glideapps.com/u/NFNHello) #### Post date: [June 11, 2024, 3:08pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/13 "2024-06-11T15:08:14Z")
If you make this post into a feature request here in the forum, I’ll be happy to vote for it! ---
### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh) #### Post date: [June 12, 2024, 12:26am UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/14 "2024-06-12T00:26:32Z")
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` ---
### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin) #### Post date: [June 12, 2024, 2:48am UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/15 "2024-06-12T02:48:32Z")
Copying various codes under different conditions using the ITE column will be simpler. ---
### Author: ![Rien\_Dumore](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rien_dumore/32/79283_2.png) [@Rien\_Dumore](https://community.glideapps.com/u/Rien_Dumore) #### Post date: [July 9, 2024, 9:02pm UTC](https://community.glideapps.com/t/css-to-make-progress-bars-green-when-complete/66582/16 "2024-07-09T21:02:55Z")
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