Clever Geek Handbook

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:

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


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

+3


source


I think you want -webkit-box-orient

.



Checkout a Playground with a box of models from Flexie .

0


source






More articles:


All Articles