JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;">0%</div>
</div>

JavaScript

var timer = 0;
	var perc = 0;

	function updateProgress(percentage) {
		$('#pbar_innerdiv').css("width", percentage + "%");
		$('#pbar_innertext').text(percentage + "%");
	}

	function animateUpdate() {
		perc++;
		updateProgress(perc);
		if(perc < 835000) {
			timer = setTimeout(animateUpdate, 50);
		}
	}

	$(document).ready(function() {
		$('#pbar_outerdiv').click(function() {
			clearTimeout(timer);
			perc = 0;
			animateUpdate();
		});
	});