JSFiddle - React, Tailwind, and code Playground

by wiltomap

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="progressbar"><div class="progress-label">Loading...</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 barre = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
 
    barre.progressbar({
      value: false,
      change: function() {
        progressLabel.text( barre.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Terminé !" );
      }
    });
 
    function progress() {
      var val = barre.progressbar( "value" ) || 0;
 
      barre.progressbar( "value", val + 2 );
 
      if ( val < 99 ) {
        setTimeout( progress, 80 );
      }
    }
 
    setTimeout( progress, 2000 );
  });