1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    1
    Vote Rating
    0
    vsrini007 is on a distinguished road

      0  

    Default Progress bar in multiple colours

    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!!!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,206
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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 Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    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 services@sencha.com

    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.

Thread Participants: 1