Use JS to create animated progress bar function

This time I will introduce to you what are the precautions for using JS to create an animated progress bar function. The following is a practical case, let's take a look.

1. Effect

##2. Source code

  <script>
    window.onload = function () {
      var myProgress = document.getElementById("myProgress");
      var mySpan = document.getElementById("mySpan");
      var value = myProgress.value;
      mySpan.innerText = value + "%";
      var ID = setInterval(function () {
        value = myProgress.value;
        if (value < 100) {
          value += 10;
          myProgress.value = value;
          mySpan.innerText = value + "%";
        }
        if (value == 100) {
          clearInterval(ID);
        }
      }, 500);
    }
  </script>


<label>进度条</label>
<progress></progress>
<span></span>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

Application of angular2 and shared modules

Vue Nuxt.js for server-side rendering

The above is the detailed content of Use JS to create animated progress bar function. For more information, please follow other related articles on the PHP Chinese website!