jQuery Progress Bar with Examples

In this article, I am going to discuss the jQuery Progress Bar with Examples. Please read our previous article, where we discussed jQuery Animation Queue. At the end of this article, you will learn how to make a simple animation of a progress bar using jQuery.

What is a Progress Bar?

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.

jQuery Progress Bar

Here is the full source code of the progress bar. Let’s first write the code and then understand the code.

<!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: 10px 0;
      height: 90%;
      width: 0;
      background: rgb(87, 181, 243);
      text-align: center;
      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 Simple 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 () {
      $('#myButton').click(function () {
        animateProgressBar($('#percentage').val());
      });

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

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

Steps:

We have first built the UI portion of the progress bar using HTML & CSS
At first, we have made a function animateProgressBar() which is taking a parameter “percentageCompleted” inside that we are increasing the width of innerDiv by animate() method. Then we are using another animate() function in which we are increasing the counter value from 1 to ‘percentageCompleted’ and in every step of the animation we are changing the text of the innerDiv to the updated counter
On the click of the button, we are invoking the function animateProgressBar() with the argument ‘value of the <select> element’

Now run the above code and you will get the following page in the browser.

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

In the next article, I am going to discuss how to optimize the jQuery Progress Bar with Examples. Here, in this article, I try to explain the jQuery Progress Bar with Examples and I hope you enjoy this 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.