JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <button type="button" id="start">Start</button>
        <div id="progress_bar" class="ui-progress-bar ui-container">
            <div class="ui-progress" style="width: 79%;">
                <span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
            </div><!-- .ui-progress -->
        </div><!-- #progress_bar -->
  
        <div class="content" id="main_content" style="display: none;">
            <p>Hello, World!</p>
        </div><!-- #main_content -->
    </div><!-- #container -->
</body>

CSS

body {
  background:#eee;
  padding: 30px;
  font-size: 62.5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  margin: 0;
}
  
#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: #DCDDDF;
  
}
  
.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
}
  
.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }
  
  to {
   background-position: 44px 0;
  }
}    
  
.ui-progress-bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}      
  
.ui-progress {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom,...

JavaScript

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000,
  
        easing: 'swing',
  
        step: function( progress ){
          var labelEl = $('.ui-label', this);
  
         if (progress >= 7 && labelEl.is(':hidden')) {
            labelEl.html('').fadeIn();
          };
  
          if (Math.ceil(progress) == 100) {
            labelEl.html('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else if (progress >= 10) {
            labelEl.html('Processing <b>' + Math.ceil(progress) + '%</b>');
          } 
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );
  
$(function() {
    $('#progress_bar').hide();
    $('#start').click(function() {
      $('#main_content').hide();
      $('#progress_bar').show();
      $('#progress_bar .ui-progress').css('width', '7%').
        animateProgress(43, function() {
          $(this).animateProgress(79, function() {
            setTimeout(function() {
              $('#progress_bar .ui-progress').animateProgress(100, function() {
                $('#progress_bar').hide();
                $('#main_content').slideDown();
              });
            }, 2000);
          });
      });
    });
  
});