JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<svg>
<clipPath id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M526.81,143.55a45.06,45.06,0,0,1-15.15,17.17c-9.21,6.09-18.74,9.22-35.5-1.52-3.1-2-6-5.06-9.13-7C453,143.68,417.88,122.11,408.3,114L26.06,115A25,25,0,0,1,1,90H1A32.79,32.79,0,0,1,33.7,57.17l372-1,66.18-46.5s32.63-26.54,52.53,13C524.42,22.72,557,84.42,526.81,143.55ZM405.71,56.73l.58,56.91,41.59,26.82-13.05-14.3,15.82,4.51-17.74-18,12.21-.56L427.7,97.72l13.82-1.19-12-8.32,11.65-4.81-10.29-4.25,18.54-4-20.35-4,13.52-13.35-17.68.6,10.2-10.07-7,2.65,14.6-19.11Zm-143.31.53C241,90.35,266.44,115,264.85,115"/></clipPath>
</svg>

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

CSS

body{
  margin: 10px;
}

.ui-progressbar .ui-progressbar-value {
    margin: -20px;
    }

#progressbar {
  height:350px;
    clip-path: url(#Layer_1-2); 
    background-color: #333;
}

.ui-widget-header{
  margin-top: -30px;
  background: url("https://s.tmimgcdn.com/blog/wp-content/uploads/2017/05/gradient.jpg?x54449") no-repeat;
}

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 + 2 );
 
      if ( val < 99 ) {
        setTimeout( progress, 80 );
      }
    }
 
    setTimeout( progress, 2000 );
  } );