How to create a vertical html5 progress graph in Google Chrome

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

In Mozilla Firefox, this can be done as follows:

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



source to share

2 answers

You can rotate it:

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

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

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



I think you want -webkit-box-orient


Checkout a Playground with a box of models from Flexie .



All Articles