JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="progressbar"></div>

CSS

body{text-align:center }
#progressbar{width:300px; margin:20px auto;}
.ui-progressbar { height:2em; text-align: left;  }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content { border: 1px solid #ddd; background: #eee ; border-radius:15px;}
.ui-widget-header { border: 1px solid #eee; background: #a4ddf9 ;border-radius:15px;}

JavaScript

$(function() {
    
    var pg = setInterval(function() {
        var pv = $('#progressbar').progressbar('option', 'value');
        var pc = !isNaN(pv) ? (pv + 1) : 1;
        if (pc > 100) {
            clearInterval(pg );
        } else {
            $('#progressbar').progressbar({value: pc});
        }
    },10);
});