JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<progress id="progressbar" value="50" max="100"></progress>

CSS

progress{
    -webkit-transform-origin: 0 100%;
    -webkit-transform: rotate(90deg);
    -moz-transform-origin: 0 100%;
    -moz-transform: rotate(90deg);
    -ms-transform-origin: 0 100%;
    -ms-transform: rotate(90deg);
    transform-origin: 0 100%;
    transform: rotate(90deg);    
}

JavaScript

$("#progressbar").each(function() {
        $(this)
          .data("origWidth", $(this).height())
          .height(0)
          .animate({
            height: $(this).data("origWidth") // or + "%" if fluid
            }, 1200);