JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<div id="progressBar"><div class="progress-bar"></div></div>
<br /><br />
<div id="progressBar2"><div class="progress-bar"></div></div>

CSS

#progressBar,
#progressBar2 {
		width: 400px;
		height: 22px;
		border: 1px solid #111;
		background-color: #292929;
}

#progressBar .progress-bar,
#progressBar2 .progress-bar {
		height: 100%;
		color: #fff;
		text-align: right;
		line-height: 22px; /* same as #progressBar height if we want text middle aligned */
		width: 0;
		background-color: #0099ff;
}

JavaScript

function progress(percent, $element) {
	var progressBarWidth = percent * $element.width() / 100;
	$element.find('.progress-bar').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
}

progress(50, $('#progressBar'));

progress(30, $('#progressBar2'));