How do I flip a progressbar vertically?

Question

I'm currently working on a project that's supposed to have a vertical progressbar along the left side of the screen that displays the users progress.

I'm using the HTML progress-element like this <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;

 }

My jQuery looks like this  

  <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>

Is it at all possible to flip the progress bar and make it go from the top down?

Answer 1

You can try using CSS transform properties, here's a demo: 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);    
}