is there anyway to have jquery ui progress bar show up vertical?

Question

i want a progress bar to show percentfilled but i want to make it vertical like a thermometer like this below. is this possible with an option on Jquery UI progress bar? I want something that looks like

Answer 1

There's no option currently, but it would be easy to modify the widget to do what you want. The progressbar source is clear, just alter the _refreshValue() function at the bottom and fiddle with the css a bit. Good luck!

Answer 2

There is a plugin, but I haven't used it so I don't know if you can adapt it.

Or, you could just make your own using HTML & CSS. I made a demo here where I added a jQuery UI Slider to control the look of the bar. Here is the basic code (just for the bar)

HTML

<div class="progressbar">
 <span class="progressbar-value">
  <em class="progressbar-cover"></em>
 </span>
</div>

CSS

.progressbar {
 width: 25px;
 height: 215px;
 position: relative;
 background: transparent url(http://i48.tinypic.com/290tvnk.png) no-repeat;
}
.progressbar-value {
 position: absolute;
 display: block;
 margin: 0;
 border: 0;
 width: 15px;
 height: 200px;
 top: 7px;
 left: 5px;
 overflow: hidden;
 text-indent: -30px;
 background: #0f0 url(http://i45.tinypic.com/minc5g.png) center center;
}
.progressbar-cover {
 position: absolute;
 display: block;
 width: 15px;
 height: 200px;
 border: 0;
 left: 0;
 bottom: 0%;
 background: transparent url(http://i49.tinypic.com/1zwge3s.png) repeat-x 0 0;
}

Answer 3

Hi. I have found this plugin. It allows vertical and horizontal orientation. I made some modification for the code in order to be closer to your picture. Here is how you can use it:

1. HTML

   <div class="percentBar jProgressBar_Red"></div>

2. CSS

   .jProgressBar_Red .border {
background-color: #000000;
}
.jProgressBar_Red .border .background {
background-color: red;
}
.jProgressBar_Red .border .background .bar {
background-color: #ffffff;
}

3. jQuery

You have to include the Plugin and then script that is using all other staff. I have modified the demo that is given on the plugin site in order to be red, vertical and it stops on the 100%. Here are the changes:

To stop the progress not to reset use this:

function incPercent() {
    percentDone = percentDone + 1;
    if (percentDone > 100) {
        percentDone = 100;
    }
    setPercent();
}

The original version is filling the progress bar from top to bottom so I inverted it like this:

function setPercent() {

    bar.setPercent(100-percentDone); //set the progress
    percentText.text(100-percentDone); //set the text (i.e. "xx%")

    //make the bar gradually "whiter" as it approches 100%      
    var lr = Math.floor( (255-r)* 0.8 * percentDone / 100 + r);
    var lg = Math.floor( (255-g)* 0.8 * percentDone / 100 + g);
    var lb = Math.floor( (255-b)* 0.8 * percentDone / 100 + b);

    //change the bar color of the bottom bar
    //note: calling jProgressBar here simply casts the jQuery object as a jProgressBar object
    bar.eq(1).jProgressBar().setBarColor("#" + lr.toString(16) + lg.toString(16) + lb.toString(16));
}

You also can take a look at the code an find much nicer way for this. The variables lr,lg, lb are used to put a gradient of the filling colour. If you want to use that you should change the values of r,g,b variables in the default.js file to be the beginning colour. If you want the progress bar to look with different shape, for example thermometer as on the image you provided, you can put the empty thermometer as a background and above it the div that is going to fill up.