JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progressbar" style="margin: 0px 0px 16px 0px;"><span style="position: absolute;text-align: center;margin: 5px 0 0 45%;"></span>
</div>

<center>
    <input id="fail" type="button" value=" Fail Now " />
</center>

CSS

"#progressbar" {
    background: 'LightYellow'
}

#progressbar > div {
    background: Orange;
}

JavaScript

var countUpTimer;
var countUp_number = -10;
var deferred = $.Deferred();
var promise = deferred.promise();

$(document).ready(function () {
    $("#progressbar").progressbar();
    
    $("#fail").click(function () {
        deferred.reject();
    });

    //模拟后台数据更新
    function countUp() {
        if (countUp_number < 100) {
            countUp_number += 10;
            deferred.notify();
            countUpTimer = 	setTimeout(countUp, 100);
        } else {
            deferred.resolve();
        }
    }

    promise.done(function() {
              alert("Done!");
    	  })
        .fail(function() {
            $("#progressbar").css({
              'background': 'red'
         });
    	}).progress(  function () {
        $("#progressbar").progressbar({
            value: countUp_number
        });
        $("#progressbar > span")
            .html(countUp_number + "%");
    });

    countUp();
});