How to implement a progress bar based on JQuery

2 years ago
Isabella Edwards
2 minutes

A progress bar based on jQuery can be implemented through the following steps:

  1. a division or section of a website
<div id="progress-bar"></div>
  1. Adjust the appearance of the progress bar using CSS styles. You can customize the border style, background color, and more.
#progress-bar {
  width: 300px;
  height: 20px;
  background-color: lightgray;
  border: 1px solid gray;
}
  1. Use jQuery selectors in a JavaScript file to select the element of the progress bar and save it in a variable.
var progressBar = $('#progress-bar');
  1. – Make the object come to life with animate()
progressBar.animate({
  width: '100%'
}, 1000);

The code above will gradually increase the width of the progress bar from its initial state (0%) to its final state (100%), over a duration of 1 second.

The complete code is shown as follows:

<!DOCTYPE html>
<html>
<head>
  <title>Progress Bar</title>
  <style>
    #progress-bar {
      width: 300px;
      height: 20px;
      background-color: lightgray;
      border: 1px solid gray;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      var progressBar = $('#progress-bar');
      
      progressBar.animate({
        width: '100%'
      }, 1000);
    });
  </script>
</head>
<body>
  <div id="progress-bar"></div>
</body>
</html>

You can adjust the code according to your needs, such as changing the width, color, and animation duration of the progress bar to meet your requirements.

bannerAds