How to make a vertical html5 progress bar in Google Chrome


Is it possible to make vertical HTML5 progress bar in Google Chrome?

In Mozilla Firefox, it can be done in the following way:

    .vert {
        -moz-orient: vertical;
<progress class="vert" style="position: absolute; top: 0px; left: 0px;"
value="10" max="100" id="progressBar">No progress bar</progress>
Problem courtesy of: Max


You could rotate it:

Webkit: -webkit-transform: rotate(90deg);

FireFox: -moz-transform: rotate(90deg);

IE: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Solution courtesy of: Matt K


I think you want -webkit-box-orient.

Checkout the box model playground from Flexie.

Discussion courtesy of: bennylope

This recipe can be found in it's original form on Stack Over Flow.