jquery - 如何垂直翻转进度条？

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

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