Progress bar in multiple colours

[vsrini007]

We have a requirement in which we have to display the progress bar in multiple colours

i.e for the first 50% in green colour,next 30% in green colour, last 20% in red colour

Can anyone please help me with the approach and share the code on how to do it

Thanks in adavance!!!

[mitchellsimoens]

The element you need is div.progress-bar. It's a div that get's resized based on the value and has a background color and image shown on it.

If you always want to show all colors no matter the progress then just create a background image and stretch it to 100% of the width and as the div gets sized, the background image should keep up with that size.

If you only want to show only a portion of the colors so the background image would be 100% of the progressbar component but the element only shows part of it based on it's width is a little tricky. If all your progressbar components will be the same width, that's easy... just make a background-image and the element will only show a portion based on it's width.