THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create a Dynamic Animated Progress Bar Using JavaScript

Create a Dynamic Animated Progress Bar JavaScript





Welcome, How to Create a Dynamic Animated Progress Bar Using JavaScript in Hindi. Create a Dynamic Animated Progress Bar with Percentage Using JavaScript in Hindi.

Definition and Usage
The clearInterval() method clears a timer set with the setInterval() method.

The ID value returned by setInterval() is used as the parameter for the clearInterval() method.

Definition and Usage
The clearInterval() method clears a timer set with the setInterval() method.

The ID value returned by setInterval() is used as the parameter for the clearInterval() method.

SOURCE CODE COPY HERE


<!-- Create a Dynamic Animated Progress Bar Using JavaScript: -->
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Maven+Pro&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
  *{
    font-family: 'Maven Pro', sans-serif;
  }

  #myprogress{
    width: 80%;
    background: grey;
    margin: auto;
  }

  #mybar{
    width: 1%;
    background: green;
    color: white;
    text-align: center;
  }

</style>

<body>
  <h1 style="text-align: center;"><i class="fa fa-music" aria-hidden="true"></i> Dynamic Animated Progress Bar <i class="fa fa-music" aria-hidden="true"></i> </h1>
  <h1 style="text-align: center;"> DONATION FOR SUPPORT:    PhonePay = vinodbahadur@ybl      GooglePay: vbthapa55@oksbi
 Believe me all this money will be used to make more quality videos and to make my channel grow.
So that I can always provide you awesome free videos :) </h1>

  <div id="myprogress">
      <div id="mybar">
        <span id="incvalue">1%</span>
      </div>
  </div>

  <br> <button onclick="move()">ClickMe</button>

<script>
  const move = () => {
    var elem = document.getElementById("mybar");
    var width = 1;
    var id = setInterval(frame, 10)

    function frame(){
      if(width >= 100){
        clearInterval(id);
      }else{
        width++;
        elem.style.width = width + "%";
        document.getElementById("incvalue").innerHTML = width + "%";
      }
    }
  }

</script>

</body>
</html>

No comments:

Post a Comment