Change jQuery UI direction

Question

By default, the default jQuery JavaScript control panel is left to right. How to change it so that it moves from right to left at the end? Below is an example of what I'm trying to achieve.

Answer 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 make sure that this is what you intended.

Answer 2

You can also use CSS3 to rotate the execution step 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 in older versions of IE.

Answer 3

I had to solve the same problem today with angular ui progressbar. Other answers were close, but did not work in bootstrap 3 without changing all instances that were unacceptable to me.

This worked ... The selector gets the first child div and then applies a 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!