CODEWITHSUNDEEP
jqueryhtmlcss
Albin M
Albin M

Reputation: 45

How do I flip a progressbar vertically?

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?

Upvotes: 4

Views: 6348

Answers (3)

Chankey Pathak
Chankey Pathak

Reputation: 21676

Alternative approach to have a vertical progress bar

I had to make something similar some time ago. You can have a look at this demo and apply the similar to your code.

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

Upvotes: 0

Sandro Paganotti
Sandro Paganotti

Reputation: 2313

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

Upvotes: 5

Krishna
Krishna

Reputation: 1996

Did you try transform rotate on the container div css?

like below

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

Upvotes: 1

Related Questions