How to make a vertical html5 progress bar in Google Chrome

Question

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>

Answer 1

You could rotate it:

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

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

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

• Max: -webkit-transform rotated it, but the position of the elemet is different to (0,0) now
• Max: Looks like such style is a solution: -webkit-transform: rotate(-90deg) translateY(-1000%); -webkit-transform-origin: 100% 0%;
• Max: The style I posted above solved my problem. But maybe there is a better solution exists ...
• Matt K: I don't see how it could get any easier than that.
• OddDev: @MattK this comes with a lot of constraints. E.g. width/height references.

Answer 2

I think you want -webkit-box-orient.

Checkout the box model playground from Flexie.

• TankorSmash: The first link is down now, I think, it shows a ton of tracking if you visit it