3 Nov 2011 3:16 AM #1
Progress bar in multiple colours
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!!!
18 Nov 2011 11:33 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
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.Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.