The today over lesson is about the Some Nice Progress Bars With JS, I hope this lesson is useful for you.

Html Code

h1: It means Head1, and head one is most big head, Head one is very important for the google.

P: In the HTML it mean is paragraph, paragraph is like noraml write,

<div class="container">
  <h1>Some different progress bars</h1>
  <div class="progress progress0">
    <h6>Pizza</h6>
    <div class="progress-bar">
      <div class="progressing"></div>
      <span class="margin"></span>
    </div>
    <p class="percent-num">0%</p>
  </div>
  <div class="progress progress1">
    <h6>Cafe</h6>
    <div class="progress-bar">
      <div class="progressing"></div>
      <span class="margin"></span>
    </div>
    <p class="percent-num">0%</p>
  </div>
  <div class="progress progress2">
    <h6>Sandwich</h6>
    <div class="progress-bar">
      <div class="progressing"></div>
      <span class="margin"></span>
    </div>
    <p class="percent-num">0%</p>
  </div>
</div>

Css Code

body: the boday of css we wrote the, height, display, align-items, justify-items, background. In the body we write all of the code and another

* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-items: center;
  background: linear-gradient(45deg, #40a8ee 50%, #199cf3 50%);
}

.container {
  position: relative;
  background: white;
  border-radius: 30px;
  width: 700px;
  height: 350px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.progress p {
  position: relative;
  right: 40px;
  margin-top: -12px;
  font-size: 24px;
}

.progress h6 {
  margin-top: -6px;
  font-size: 18px;
  letter-spacing: 1px;
}

.progress-bar span {
  position: absolute;
  transform: translateY(-20px) translateX(-10px);
  left: 0;
  width: 25px;
  height: 25px;
  background: white;
  border: 6px solid rgb(255, 0, 85);
  border-radius: 50%;
}

.container h1 { letter-spacing: 1px; }

.container .progress {
  display: flex;
  width: 100%;
  margin: 50px auto;
}

.progress .progress-bar {
  position: absolute;
  left: 150px;
  width: 60%;
  height: 15px;
  border-radius: 30px;
  background: rgb(226, 226, 226);
}

.progress-bar div {
  width: 0%;
  height: 100%;
  background: rgb(255, 0, 85);
  border-radius: 30px;
}

Javascript Code, JS

Loop: In the JS, the first we write the (FOR loop), var i = 0; i start than zero, i < 3, while i small than 3, any time plus plus one,

for(var i = 0; i < 3; i++){
  start(i);
}

function start(i){
  var precent = document.querySelector('.progress${i} .percent-num');
  var progressing = document.querySelector('.progress${i} .progressing');
  var margin = document.querySelector('.progress${i} .margin');

  requestAnimationFrame(grow);

  var progress = 0;
  var random = parseInt(Math.random() * 100);

  function grow(){
    progress += 1;
    console.log(random);
    if(progress <= random){
      precent.innerHTML = parseInt(progress) + "%";
      progressing.style.width = progress + "%";
      margin.style.left = progress + "%";
      requestAnimationFrame(grow);
    }
  }
}

I hope this lesson is be useful for you. How a good day