javascript - 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 */
} 

小提琴

未在旧版本的 IE 上测试。

Answer 3

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

这有效...选择器获取第一个子 div，然后应用浮动

.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
        });