JSFiddle - React, Tailwind, and code Playground

by noiping

HTML

<script src="//www.leavesongs.com/other/example/processbar/js/jquery-1.7.1.js"></script>
<script src="//www.leavesongs.com/other/example/processbar/js/jquery.corner.js"></script>
<body>
  <div id="processbar">
  	<div class="finish"></div>
  </div>
</body>

CSS

body {
	width: 100%;
	background-color: #CCC;
}
#processbar {
	height: 13px;
	width: 30%;
	margin-top: 200px;
	margin-left: 35%;
	background-color: #fff;
	border: 1px solid #999;
}
#processbar .finish {
	height: 13px;
	width: 40%;
	background-color: #999;
}

JavaScript

$(document).ready(function(){
	$("#processbar").corner();
	$("#processbar .finish").corner();
	var i = 0;
	var timer = setInterval(function(){
		$("#processbar .finish").css("width", i + "%");
		i++;
		if (i > 100) {
			clearInterval(timer);
		}
	}, 10);
})