<!DOCTYPE html>
<html>
<head>
	<title>Custom Progress Bar Css3 & JQuery</title>
	<link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>
<body>



	<div class="container">	
		<i>0%</i>	
		<div class="Loading">
			<span data-charge='100'></span>
		</div>
	</div>	



	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

	<script type="text/javascript">		
		$(function(){

			$('.Loading span').animate({
				width : $('.Loading span').data('charge') + '%'
			},1000);

			var getCounter = parseInt($('.container i').text());

			var MyCounter = setInterval(function(){
				if(getCounter !== 101){
					$('.container i').text(getCounter++ + '%');
				}else{
					clearInterval(MyCounter);
					$('.container i').text('Finished');
				};
	
			},10);

		});
	</script>

	
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
}
::selection{
	background-color:#2d98da;
	color:#fff;
}
body{
	background-color:#0f1418;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	min-height:100vh;
}
.container{
	position:relative;
	text-align:center;
}
.container .Loading{
	position:relative;
	width:500px;
	height:22px;
	background:rgba(255,255,255,.05);
	border-radius:25px;
	display:flex;
	align-items:center;
	border:5px solid #1b1f23;
}
.container .Loading span{
	position:absolute;
	width:0%;
	height:100%;
	background-color:#0fbcf9;
	border-radius:25px;
}
.container i{
	color:#fff;
	font-size:5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.