JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar"></div>
<div class="show">0</div>
<input type="text" name="count" class="count">
<div class="submit">submit</div>

<button id="pause">Pause</button>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.bar {
    width: 0%;
    background-color: red;
    height: 15px;
    margin-bottom: 15px;
}

JavaScript

var paused = false;
    $("#pause").click(function() { paused = !paused; });

	var bar = $('.bar');
    var timer;
	$('.submit').click(function () {
        if (timer) return;

        var newCount = parseInt($('.count').val(), 10);
	    var i = 0;
	    var timeChange = 1000;
	    console.log(newCount);
	    timer = setInterval(function () {
            if (paused) return; // do nothing when paused
	        i++;
            bar.animate({
	            width: 100 / newCount * i + '%'
	        }, 1000, 'linear');
            console.log(i);
	        $('.show').text(i);
	        if (i == newCount) {
	            clearInterval(timer);
                timer = null;
	            console.log('Finished!');
	            bar.animate({
	                width: '0%'
	            }, 1000);
	        }
	    }, 1000);
	});