jQuery Progress Bar

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:
  1. We have first built the UI portion of the progress bar using HTML & CSS
  2. 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
  3. 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.

jQuery Progress Bar

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

jQuery Progress Bar with Examples

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.

Leave a Reply

Your email address will not be published.