Question

我目前正在开发一个项目，它应该在屏幕左侧有一个显示用户进度的垂直进度条。

我正在使用HTML进度元素，例如<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>

是否可以翻转进度条并让它自上而下？

Answer 1

您是否尝试在容器div css上进行变换旋转？

如下所示

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

Answer 2

您可以尝试使用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);    
}

Answer 3

有一个垂直进度条的替代方法

前段时间我不得不做类似的事情。您可以查看此demo并将类似内容应用于您的代码。

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

如何垂直翻转进度条？

3 个答案: