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 height="0" width="0">
      <clipPath id="svgPath3">
      <path d="M0,0V211.08H232s4.38.06,7-1.12a6.86,6.86,0,0,0,3.7-4.51,22,22,0,0,1,40.69-4.89c.66,1.22,3.32,6.48,4.61,8.4,2,3,8.51,2.12,8.51,2.12h15.59V0Z"/>
      </clipPath>
</svg>

<svg viewBox="0 0 540.63 167.28"><defs><style>.cls-1{fill:none;stroke:#0c0807;stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>Asset 3</title><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></div>

CSS

body{
  margin: 0;
  padding: 0;
}

#progressbar {
    clip-path: url(#Layer_1-2);
}

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 );
  } );