JSFiddle - React, Tailwind, and code Playground

by patrick29

HTML

<div id="progressbar"><div class="progress-label">Loading...</div></div>

CSS

.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

JavaScript

$(function() {
    var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
        value: false,
        change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%"       );
        },
        complete: function() {
            progressLabel.text( "Complete!" );
        }
    });
 
    function progress() {
        var val = progressbar.progressbar( "value" ) || 0;
 
        progressbar.progressbar( "value", val + 1 );
 
        if ( val < 99 ) {
            setTimeout( progress, 100 );
        }
    }
 
    setTimeout( progress, 3000 );
});