jQuery UI Progressbar方向更改

Question

jQuery UI Progressbar的默认方向是从左到右。如何更改它以便在完成时从右向左移动？以下是我想要实现的一个例子。

Answer 1

仅限CSS，请尝试将其添加到您的网页：

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

这不是一个完整的答案，而是一个测试，看看这是否是你想要的。

Answer 2

您也可以使用CSS3将进度条旋转180度：

#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

未在旧版IE上测试。

Answer 3

我今天必须用angular ui的进度条解决同样的问题。其他答案很接近但在bootstrap 3中没有用，没有改变我不接受的所有实例。

这很有用......选择器获取第一个子div，然后应用float

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

和

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

希望这有帮助！

Answer 4

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