Site Overlay

Simple jquery progress bar

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

In this video we will discuss how to create a simple animated jquery progress bar using animate() function.

Replace < with LESSTHAN symbol and > with GREATERTHAN symbol

<script src=”jquery-1.11.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

$(‘#myButton’).click(function () {

function animateProgressBar(percentComplete) {
‘width’: (500 * percentComplete) / 100
}, 2000);

$({ counter: 1 }).animate({ counter: percentComplete }, {
duration: 2000,
step: function () {
$(‘#innerDiv’).text(Math.ceil(this.counter) + ‘ %’);

<body style=”font-family:Arial”>
Select percentage :
<select id=”ddlPercent”>
<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>
<input type=”button” id=”myButton” value=”Start Animation” />
<br /><br />
<div id=”outerDiv” style=”background-color:#EEEEEE; height:20px; width:500px; padding:5px”>
<div id=”innerDiv” style=”width:0px; height:19px; text-align:center; background-color:red; color:white”></div>


Xem thêm các bài viết về Giải Trí:

11 thoughts on “Simple jquery progress bar

  1. The math behind the percentage complete is basic arithmetic. 90 percent is same as the fraction 90/100. The fraction 90/100 is same as decimal .9 when you divide the numerator by the denominator. Since it is a ‘of’ problem, we know to multiply. So we multiple 500 with .9 which returns 450.

  2. Calling animate() on the json object looks cool. However, I am not sure i understand it completely. How can i call a jQuery method on a json object? Can you suggest some video/link that i can refer to understand that.
    Also, the step was also new for me, but i can look that up.
    You are awesome!! Thanks!!

  3. if I want to set the percentage from code behind with evaluated values using query…I am just replacing percentageCompleted to <%=Total_Percent%>…but showing error asTotal_Percent does not exist

  4. pragim I do not see why your red inner div is showing when its width = 0, Mine is as I expect invisible which is incorrect why is yours visible when set to width 0, thanks

  5. I would make this example as follows:
    function animateIt(percent){
          $("#innerDiv").animate({"width" : (percent * 500)/100}, {
            duration: 3000,
            step: function(now, fx){
               $("#innerDiv").text(Math.ceil((now * 100) / 500) + ' %');

  6. Really great tutorial, thank you 🙂 But it'd be great if the value would count down if the previous number was bigger (so for example if it's on 70 and you set it to 50, it should not count from 1 to 50 but from 70 to 50)

Leave a Reply

Your email address will not be published. Required fields are marked *