JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div class="progressbar"><div class="progress-label"></div></div>
<div class="progressbar1"><div class="progress-label1"></div></div>
<div class="progressbar2"><div class="progress-label2"></div></div>
<div class="progressbar3"><div class="progress-label3"></div></div>

CSS

.ui-progressbar {
position: relative;
margin: 50px 100px;
}
.progress-label,.progress-label1,.progress-label2,.progress-label3{
position: absolute;
left: 80%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}

JavaScript

$(function() {
var progressbar = $( ".progressbar" ),
progressLabel = $( ".progress-label" );
    progressbar.progressbar({
        value: 0,
        change: function() {
           progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        }
    });
    function progress() {
    var val = progressbar.progressbar( "value" ) || 0;
        progressbar.progressbar( "value", val + 1 );
            if ( val < 55 ) {
                setTimeout( progress, 1);
            }
        }
        setTimeout( progress, 1 );
    });

$(function() {
var progressbar = $( ".progressbar1" ),
progressLabel = $( ".progress-label1" );
    progressbar.progressbar({
        value: 0,
        change: function() {
           progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        }
    });
    function progress() {
    var val = progressbar.progressbar( "value" ) || 0;
        progressbar.progressbar( "value", val + 1 );
            if ( val < 99 ) {
                setTimeout( progress, 1);
            }
        }
        setTimeout( progress, 1 );
    });
$(function() {
var progressbar = $( ".progressbar2" ),
progressLabel = $( ".progress-label2" );
    progressbar.progressbar({
        value: 0,
        change: function() {
           progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        }
    });
    function progress() {
    var val = progressbar.progressbar( "value" ) || 0;
        progressbar.progressbar( "value", val + 1 );
            if ( val < 27 ) {
                setTimeout( progress, 1);
            }
        }
        setTimeout( progress, 1 );
    });
$(function() {
var progressbar = $( ".progressbar3" ),
progressLabel = $( ".progress-label3" );
    progressbar.progressbar({
        value: 0,
        change: function() {
           progressLabel.text( progressbar.progressbar( "value" ) + "%" );
        }
    });
    function progress() {
    var val = progressbar.progressbar( "value" ) || 0;
        progressbar.progressbar(...