Custom Animated HTML5 Progress Bar In jQuery

This is a small script to create a custom animated progress bar component using jQuery and the native HTML5 <progress /> element.

How to use it:

1. Create a normal HTML5 progress bar to show the progress of a task.

<progress id="progressbar" value="0" max="100"></progress>

2. Create a value element to display how much of the task that has been completed.

<span class="progress-value">0%</span>

3. Customize the appearance of the progress bar.

progress {
  background-color: #f3f3f3;
  border: 0;
  width: 80%;
  height: 18px;
  border-radius: 9px;
}

progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 9px;
}

progress::-webkit-progress-value {
  background: #209e9c;
  background: -moz-linear-gradient(top,  #209e9c 0%, #066767 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#209e9c), color-stop(100%,#066767));
  background: -webkit-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -o-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -ms-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: linear-gradient(to bottom,  #209e9c 0%,#066767 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209e9c', endColorstr='#066767',GradientType=0 );
  border-radius: 9px;
}

progress::-moz-progress-bar {
  background: #209e9c;
  background: -moz-linear-gradient(top,  #209e9c 0%, #066767 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#209e9c), color-stop(100%,#066767));
  background: -webkit-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -o-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -ms-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: linear-gradient(to bottom,  #209e9c 0%,#066767 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209e9c', endColorstr='#066767',GradientType=0 );
  border-radius: 9px;
}

4. Load the latest jQuery JavaScript library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. The jQuery script to animate the progress bar.

$(() => {
  {
    let progressbar = $('#progressbar');
    let max = progressbar.attr('max');
    let time = (1000 / max) * 5;
    let value = progressbar.val();

    const loading = () => {
      value += 1;
      progressbar.val(value);

      $('.progress-value').html(value + '%');

      if (value == max) {
        clearInterval(animate);
      }
    };
    const animate = setInterval(() => loading(), time);
  };
});

---

This awesome jQuery plugin is developed by mushfiqweb. For more Advanced Usages, please check the demo page or visit the official website.