jQuery

How to create a progress bar using jQuery

In this article we will learn How to create a progress bar using jQuery ?
Here you will learn create a simple animated jquery progress bar using animate() function.

create-progress-bar-using-jquery

create-progress-bar-using-jquery

How to create a progress bar using jQuery ?
Let’s start up with the HTML markup:

[php]
<body>
Select Value &nbsp;
<select id="ddlPercentageValue">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<br /><br />
<div id="outerDiv" style="background-color:#EEEEEE;
height:20px; width:500px; padding:5px">
<div id="innerDiv" style="background-color:darkcyan; height:20px;
width:0px; color:white; text-align:center">
</div>
</div>
</body>
[/php]

Add jQuery library link

[php]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
[/php]

Add jQuery Code for How to create a progress bar using jQuery
[php]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(‘#ddlPercentageValue’).change(function () {
animateProgressBar($(‘#ddlPercentageValue’).val());
});

function animateProgressBar(percentageCompleted) {
$(‘#innerDiv’).animate({
‘width’: (500 * percentageCompleted) / 100
}, 3000);

$({ counter: 1 }).animate({ counter: percentageCompleted }, {
duration: 3000,
step: function () {
$(‘#innerDiv’).text(Math.ceil(this.counter) + ‘ %’);
}
})
}
});
</script>
[/php]

Complete Code :
[php]
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(‘#ddlPercentageValue’).change(function () {
animateProgressBar($(‘#ddlPercentageValue’).val());
});

function animateProgressBar(percentageCompleted) {
$(‘#innerDiv’).animate({
‘width’: (500 * percentageCompleted) / 100
}, 3000);

$({ counter: 1 }).animate({ counter: percentageCompleted }, {
duration: 3000,
step: function () {
$(‘#innerDiv’).text(Math.ceil(this.counter) + ‘ %’);
}
})
}
});
</script>
</head>
<body>
Select Value &nbsp;
<select id="ddlPercentageValue">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<br /><br />
<div id="outerDiv" style="background-color:#EEEEEE;
height:20px; width:500px; padding:5px">
<div id="innerDiv" style="background-color:darkcyan; height:20px;
width:0px; color:white; text-align:center">
</div>
</div>
</body>
</html>
[/php]

Any Question and suggestion related to this article please comment me. Thank You

Leave a Reply

Your email address will not be published.