Optimize jQuery Progress Bar with Example

In this article, I am going to discuss How to Optimize the jQuery Progress Bar with Examples. Please read our previous article, where we discussed jQuery Progress Bar. This is a continuation part to our previous article. So, please read our previous article before proceeding to this article. At the end of this article, you will understand how to make the progress bar more optimized and enhanced

Optimize jQuery Progress Bar

At the moment we have two problems with our progress bar program

When you select 40%, it starts to count from 1 to 40 which is good. Now if you select 80%, it starts again from 1 and counts all the way till 80, instead of continuing to count from 40 to 80.
Again, if you want to go back from 80% to 50%, we expect that it will start from 80% and will end at 50%. But instead of that, it starts again from 1 and counts till 50.

How to Solve the above two problems?

Now let’s solve these two problems. At first, let’s understand that why this is happening. You can see that we have set the counter value 1 at the initial stage and we are running that from 1 to the percentageCompleted. That is why it is always counting from that percentage. Instead of that if we can keep track of the previous percentage value which user selected then we can solve the problem. We will run the counter from the previous percentage value to the current percentage value.

Notice that how we can implement that in our program

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <style>
    body {
      background-color: rgb(226, 225, 225);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    h1 {
      font-size: 40px;
      margin-bottom: 30px;
      padding: 30px;
      text-align: center;
      text-transform: capitalize;
      font-style: italic;
    }

    .outerDiv {
      margin: 20px auto;
      padding: 0;
      width: 800px;
      height: 40px;
      overflow: hidden;
      background: #e5e5e5;
      border-radius: 6px;
      border: 2px solid #000;
    }

    .innerDiv {
      padding: 8px 0;
      height: 90%;
      width: 0;
      background: rgb(87, 181, 243);
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      border-radius: 6px;
    }

    select {
      padding: 5px 8px;
      margin: 10px auto;
      width: 130%;
      border: none;
      font-size: 20px;
      width: 80px;
      cursor: pointer;
      font-style: italic;
    }

    label {
      font-size: 24px;

    }

    input[type="button"] {
      background-color: #234d69;
      border: none;
      color: #fff;
      padding: 20px 35px;
      margin: 10px;
      text-align: center;
      text-decoration: none;
      display: block;
      font-size: 24px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
    }
  </style>
</head>

<body>
  <h1>jQuery Progress Bar</h1>
  <label for="percentage">Select Percentage :

    <select id="percentage">
      <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>
  </label>

  <div class="outerDiv">
    <div class="innerDiv">
    </div>
  </div>
  <input type="button" id="myButton" value="Start Animation" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var currentPercentage = 0;
      var previousPercenage = 0;
      $('#myButton').click(function () {
        previousPercenage = currentPercentage;
        currentPercentage = $('#percentage').val();
        animateProgressBar(previousPercenage, currentPercentage);
      });

      function animateProgressBar(previousPercenage, currentPercentage) {
        $('.innerDiv').animate({
          'width': (800 * currentPercentage) / 100
        }, 1000);

        $({ counter: previousPercenage }).animate({ counter: currentPercentage }, {
          duration: 1000,
          step: function () {
            $('.innerDiv').text(Math.ceil(this.counter) + ' %');
          }
        })
      }
    });
  </script>
</body>
</html>

Steps:

We have taken two parameters previousPercentage & currentPercentage. We are setting currentPercentage to the value from the dropdown list and previousPercentage to currentPercentage. Thus, we keep tracking what users selected previously.
In the function animateProgressBar() instead of using one parameter, we are using two parameters previousPercentage & currentPercentage and we are incrementing the counter value from previousPercentage to currentPercentage.

Output:

Now run the above code and you will get the following output.

Now select 40 percentage and click on the Start Animation button and you will get the following output.

Now select the percentage as 80 and click on the Start Animation button and this time it will start from 40, not from 1 as expected and you will get the following output.

But, here, we have a problem, when it is on 80 select 50 and click the Start Animation button and you will get the following output.

Observe, it stops at 51% instead of stopping at 50%. For this problem, we can modify our code a little bit. Modify the script section as follows.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    var currentPercentage = 0;
    var previousPercenage = 0;
    $('#myButton').click(function () {
      previousPercenage = currentPercentage;
      currentPercentage = $('#percentage').val();
      animateProgressBar(previousPercenage, currentPercentage);
    });

    function animateProgressBar(previousPercenage, currentPercentage) {
      $('.innerDiv').animate({
        'width': (800 * currentPercentage) / 100
      }, 1000);
      if (previousPercenage > currentPercentage) { currentPercentage = currentPercentage - 1; }

      $({ counter: previousPercenage }).animate({ counter: currentPercentage }, {
        duration: 1000,
        step: function () {
          $('.innerDiv').text(Math.ceil(this.counter) + ' %');
        }
      })
    }
  });
</script>

If the previousPercentage is greater than the currentPercentage then we are decrementing the currentPercenatge by 1. And that solved our problem. Now, test this and you will get the output as expected as shown in the below image.

But look at the amount of code we are writing. It can be much less with this following piece of code. It will work exactly the same.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#myButton').click(function () {
      animateProgressBar($('#percentage').val());
    });

    function animateProgressBar(currentPercentage) {
      $(".innerDiv").animate({ "width": (currentPercentage * 800) / 100 }, {
        duration: 1000,
        step: function (now) {
          $(".innerDiv").text(Math.ceil((now / 800) * 100) + ' %');
        }
      });
    }
  });
</script>

In this code, we have simplified all the things. You have known the step function of the animate() method in previous articles. The step option of the animate function can be used to define a function that gets called after each step of the animation. This method has 2 parameters – now & tween.

1. now – contains the value being animated

2. tween – is a complex object and contains several properties. A few are listed below. For the complete list set a breakpoint and inspect the object.

elem – The DOM element being animated
now – The value the animation is currently at
end – The value the animation will end at

In this example, we are using the now parameter to keep track of the value that is being currently animated. Using that now parameter we can convert to percentage and to set the text of innerDiv.

In the next article, I am going to discuss how to toggle password visibility using the show/hide password checkbox with Examples. Here, in this article, I try to explain how to optimize the jQuery Progress Bar with Examples and I hope you enjoy this optimize jQuery Progress Bar article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.