JSFiddle - React, Tailwind, and code Playground

by princeofabyss

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="progressbar"></div>

CSS

div.ui-progressbar {
  border: solid 4px lightgray;
  border-radius: 20px;
  background-color: #fff;
}

div.ui-progressbar div.ui-progressbar-value {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

div.ui-progressbar.full div.ui-progressbar-value {
  background: blue;
}

div.ui-progressbar.end div.ui-progressbar-value {
  background: red;
}

JavaScript

$(function() {
    var progressTimer;
    var progressbar = $("#progressbar");

    progressbar.progressbar({
      value: 85,
      change: function() {
        if (progressbar.progressbar("value") >= 75) {
          progressbar.removeClass("middle end").addClass("full");
        }
        if (progressbar.progressbar("value") > 0 && progressbar.progressbar("value") < 25) {
          progressbar.removeClass("full middle").addClass("end");
        }
      },
    });

    function progress() {
      var pVal = progressbar.progressbar("value") || 100;
      progressbar.progressbar("value", --pVal);
      if (pVal > 0) {
        progressTimer = setTimeout(progress, 100);
      } else {
        clearTimeout(progressTimer);
        console.log("finished");
      }
    }

    progress();
  });