Results 1 to 2 of 2

Thread: Progress bar in multiple colours

  1. #1

    Default 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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    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 @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts