First, you need to have an HTML, please see below on how I do it.
- Create 3 divs: progressWrap, progressBar, and progressNum
- #progressWrap : this will be the container of the progressbar, take note of the width coz this will be the basis to compute for the percentage.
- #progressBar : this will be the actual progress bar
- #progressNum : this will be the percentage
For the benefit of this post, I set the #progressBar width to 50px which is 25% of #progressWrap width = 200px
<html>
<head>
<title>Progress Bar</title>
<style type="text/css">
#progressWrap
{
margin: 0px 0px 0px 5px;
background: #FFF;
height: 11px;
width: 200px;
}
#progressWrap #progressBar
{
height: 11px;
position:absolute;
background-color: #000;
}
#progressWrap #progressNum {
text-align:center;
width:100%;
color:#515151;
font-size:9px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="progressWrap">
<div id="progressBar" style="width:50px"></div>
<div id="progressNum">25%</div>
</div>
</body>
</html>
Next is to set our progress bar dynamic using jQuery. Please see below.
The formula for the percentage is based on the width of the container in CSS. The width is divided by 100 and will be multiplied to the percentage value to get the width of the progress bar.
<script type="text/javascript">
$(document).ready(function() {
var percent = 25;
var width = percent * parseInt($('#progressWrap').css('width')) / 100;
$('#progressNum').html(percent+'%');
$('#progressBar').css('width', width+'px');
});
</script>
To see the working script, please see below.
<html>
<head>
<title>Progress Bar</title>
<style type="text/css">
#progressWrap
{
margin: 0px 0px 0px 5px;
background: #FFF;
height: 11px;
width: 300px;
}
#progressWrap #progressBar
{
height: 11px;
position:absolute;
background-color: #000;
}
#progressWrap #progressNum {
text-align:center;
width:100%;
color:#515151;
font-size:9px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="progressWrap">
<div id="progressBar"></div>
<div id="progressNum"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
var percent = 25;
var width = percent * parseInt($('#progressWrap').css('width')) / 100;
$('#progressNum').html(percent+'%');
$('#progressBar').css('width', width+'px');
});
</script>
