4

The default direction of the jQuery UI Progressbar is from left to right. How do I change it so that it moves from right to left on completion? Below is an example of what I am trying to achieve.

right to left

Julian
  • 1,853
  • 5
  • 27
  • 48

4 Answers4

1

CSS only, try adding this to your page:

.ui-progressbar .ui-progressbar-value {
  float: right;
}

This is not a complete answer, but a test to see if this is what you intended.

jcolebrand
  • 15,889
  • 12
  • 75
  • 121
  • the js doesn't work and I don't see how starting at max would make the direction switch, let's say if I was 50% – Julian Jun 17 '12 at 04:11
  • @Julian try this new "solution" – jcolebrand Jun 17 '12 at 04:35
  • perfect. had to float it "right" of course and add a bit of jquery "('.ui-corner-left').addClass('ui-corner-right').removeClass('ui-corner-left');" but it worked perfectly. Can't believe I didn't think of this before! Might want to change that to float : right for future reference for other users. – Julian Jun 17 '12 at 05:09
  • You probably want to be a little more narrowing than just .ui-corner-left for when you add something else in the future, but sweet. – jcolebrand Jun 17 '12 at 05:10
  • How about a position:absolute;right:0; + classChange ui-corner-right. Any one who doent like to float can try it. – sabithpocker Jun 17 '12 at 05:21
  • If it worked, sure would be lovely to collect another checkmark ;-) – jcolebrand Jun 17 '12 at 06:43
1

You may also use CSS3 to rotate your progress bar 180 degrees:

#progressbar {
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -moz-transform:rotate(180deg); /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
    -o-transform:rotate(180deg); /* Opera */
}

Fiddle

Not tested on older versions of IE.

Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
  • nice, but I need ie7+ support – Julian Jun 17 '12 at 04:11
  • Ask users nicely to install [Google Chrome Frame](https://developers.google.com/chrome/chrome-frame/) on their IE6-9. `:)` – Fabrício Matté Jun 17 '12 at 04:15
  • i agree, the web would be a better place, but forcing users to install software to get a better viewing experience brings up bad memories of the the ActiveX days :) – Julian Jun 17 '12 at 04:19
  • @Julian Not going too off-topic, but "the ActiveX days"? Even nowadays IE9 asks me to allow blocked ActiveX content to access my own websites! Heh, anyway, here's a [CSS3 fully working fiddle even in IE6](http://jsfiddle.net/ult_combo/cP5SY/4/), GCF takes about 2 clicks to install only, a couple seconds to download, installs automatically and doesn't require a page reload. I'm not stressing myself with IE from now on. `:)` – Fabrício Matté Jun 17 '12 at 04:32
0

I had to solve the same issue today with angular ui's progressbar. The other answers were close but didn't work in bootstrap 3 with out changing all instances which was not acceptable to me.

This worked... The selector gets the first child div and then applies the float

.progress-reverse div:nth-of-type(1) {
    float: right;
}

and

<progressbar class="progress-striped progress-reverse active" value="progress" type="{{progressType}}"></progressbar>

Hope this helps!

Jras
  • 518
  • 3
  • 12
0
$( "#progressbar-2" ).progressbar({
           isRTL: true,
           value: 30,
           max:300
        });
Robert Columbia
  • 6,313
  • 15
  • 32
  • 40
Abdallah Labib
  • 9
  • 3