JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progressbar"></div>

JavaScript

$(function () {
    var progress = 0;
    var updateTime = 30; // ms
    var updateTimeout;

    $("#progressbar").mouseenter(function () {
        updateTimeout = setTimeout(animateFilling, updateTime);
    });

    $("#progressbar").mouseleave(function () {
        progress = 0;
        updateProgressbar();
        clearTimeout(updateTimeout);
    });

    updateProgressbar(); // init the bar

    function animateFilling() {
        if (progress < 100) {
            progress++;
            updateProgressbar();
            updateTimeout = setTimeout(animateFilling, updateTime);
        } else {
            // TODO - done loading
        }
    }

    function updateProgressbar() {
        $("#progressbar").progressbar({
            value: progress
        });
    }
});