JSFiddle - React, Tailwind, and code Playground

by veer_vin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="upgrade-service-level-bar">
	<div class="bar-full-witdh">
		<span id="blueBar"></span>
		<span id="progressPercentage">10%</span>
	</div>
</div>
<br>
<p>
Once progress bar reaches 100% the redirect should happen.
</p>

CSS

.upgrade-service-level-bar {
    background-color: #f8f8f8;
    width: 80%;
    padding: 20px 40px 20px 20px;
    border-bottom: 1px solid #ebebeb;
}

.bar-full-witdh {
    width: 100%;
    background-color: #ffffff;
    position: relative;
}

#blueBar {
    width: 10%;
    height: 6px;
    background-color: #007cba;
    display: block;
}

.bar-full-witdh span:last-child {
    font-size: 12px;
    position: absolute;
    top: -3px;
    right: -30px;
}

JavaScript

var blueProgressBar = {

	initialize: function() {
		var serviceStatus = true; // Suppose value from service
		var elem = document.getElementById("blueBar"); 
		var perNum = document.getElementById("progressPercentage");

		var width = 10; // intial progress bar width
		var id = setInterval(progressBar, 10);
		function progressBar() {
			if (width >= 100 || serviceStatus === false) {
				clearInterval(id);
				return false;
			} else {
				width ++;
				elem.style.width = width + '%'; 
				perNum.innerHTML = width * 1  + '%';
        // ----- Specify your new location
        window.location="https://www.google.com";
				return true;
			}
		}
		progressBar();
	}

}

$(function() {
	blueProgressBar.initialize();
});