Cómo crear: Barra de progreso JavaScript

Cree una barra de progreso

Paso 1 - Agregar HTML:

<div id="myProgress">
  <div id="myBar"></div>
</div>

Paso 2 - Agregar CSS:

#myProgress {
  width: 100%;
  background-color: grey;
}
#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

Paso 3 - Agregar JavaScript:

Cree una barra de progreso dinámica utilizando JavaScript (efecto de animación):

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

亲自试一试

Agregar etiqueta

Si desea agregar una etiqueta para indicar al usuario el progreso actual en el proceso, puede agregar un nuevo elemento dentro (o fuera) de la barra de progreso:

Paso 1 - Agregar HTML:

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

Paso 2 - Agregar CSS:

#myBar {
  width: 10%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center; /* Alineación horizontal (si es necesario) */
  line-height: 30px; /* Alineación vertical */
  color: white;
}

亲自试一试

Paso 3 - Agregar JavaScript:

Si desea actualizar dinámicamente el texto dentro de la etiqueta para que coincida con el valor de anchura de la barra de progreso, agregue lo siguiente:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = anchura + "%";
      }
    }
  }
}

亲自试一试