How to make a vertical html5 progress bar in Google Chrome

Problem

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

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

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

Solution

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

Discussion

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.