CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-progressbar
Julian
Julian

Reputation: 1831

jQuery UI Progressbar direction change

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

Upvotes: 4

Views: 2671

Answers (4)

Abdallah Labib
Abdallah Labib

Reputation: 9

$( "#progressbar-2" ).progressbar({
           isRTL: true,
           value: 30,
           max:300
        });

Upvotes: 0

Jras
Jras

Reputation: 518

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!

Upvotes: 0

jcolebrand
jcolebrand

Reputation: 16025

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.

Upvotes: 1

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70159

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.

Upvotes: 1

Related Questions