如何垂直翻转进度条？

Question

我正在从事一个项目，该项目应该在屏幕的左侧显示一个垂直进度条，用于显示用户的进度。

我使用HTML progress元素来实现这个功能，像这样：<progress id="progressbar" value="0" max="100"></progress> CSS：

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;

  width: 100%;
  height: 20px;
  position:fixed;
  z-index:10;

 }

我的jQuery代码如下：

  <script type="text/javascript">
  $(window).scroll(function () {
  var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
        scrollPercent = (s / (d-c)) * 100;
        var position = scrollPercent;

   $("#progressbar").attr('value', position);

});
</script>

是否有可能翻转进度条，使其从上往下移动？

- Albin M

Answer 1

您可以尝试使用CSS变换属性，这里有一个演示：

http://jsfiddle.net/sandro_paganotti/LxaJ9/

progress{
    -webkit-transform-origin: 0 100%;
    -webkit-transform: rotate(90deg);
    -moz-transform-origin: 0 100%;
    -moz-transform: rotate(90deg);
    -ms-transform-origin: 0 100%;
    -ms-transform: rotate(90deg);
    transform-origin: 0 100%;
    transform: rotate(90deg);    
}

- Sandro Paganotti

Answer 2

你是否尝试在容器div的css中使用transform rotate？像下面这样：

transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome,

- Krishna

Answer 3

实现垂直进度条的另一种方法

我之前也曾经做过类似的东西。你可以查看这个演示并将其应用到你的代码中。

HTML

<div class="skill">
    <button>Show value</button>
    <div class="outer">
        <div class="inner" data-progress="57%">
            <div></div>
        </div>        
    </div>
</div>

JS

$('.skill').on('click', 'button', function(){
    var skillBar = $(this).siblings().find('.inner');
    var skillVal = skillBar.attr("data-progress");
    $(skillBar).animate({
        height: skillVal
    }, 1500);
});

- Chankey Pathak