Crear barra de progreso usando JavaScript

Se utiliza una barra de progreso para representar el progreso de cualquier tarea que se esté llevando a cabo. Las barras de progreso generalmente se usan para mostrar el estado de descarga y carga. En otras palabras, podemos decir que las barras de progreso se pueden usar para representar el estado de cualquier cosa que esté en progreso.

Para crear una barra de progreso básica usando JavaScript, se deben realizar los siguientes pasos:

Cree una estructura HTML para su barra de progreso :
el siguiente código contiene dos elementos de etiqueta «div» llamados «Progress_Status» y «myprogressbar».

HTML

<div id="Progress_Status">

<div id="myprogressBar"></div>

</div>

Adición de CSS :
el siguiente código se usa para establecer el ancho y el color de fondo de la barra de progreso, así como el estado de progreso en la barra.

CSS

#Progress_Status {
  width: 50%;
  background-color: #ddd;
}
  
#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}

Adición de JavaScript :
el siguiente código crea una barra de progreso dinámica (animada) utilizando las funciones de JavaScript «actualizar» y «escena».

JavaScript

<script>
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
    }
  }
}
</script>

Vincule los elementos HTML, CSS y JavaScript
El programa siguiente muestra el código completo de la barra de progreso que vincula los códigos HTML, CSS y JavaScript anteriores:

HTML

<!DOCTYPE html>
<html>
<style>
#Progress_Status {
  width: 50%;
  background-color: #ddd;
}
  
#myprogressBar {
  width: 2%;
  height: 20px;
  background-color: #4CAF50;
}
</style>
<body>
  
<h3>Example of Progress Bar Using JavaScript</h3>
  
<p>Download Status of a File:</p>
  
<div id="Progress_Status">
  <div id="myprogressBar"></div>
</div>
  
<br>
<button onclick="update()">Start Download</button> 
  
<script>
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
    }
  }
}
</script>
  
</body>
</html>

Producción :

Al hacer clic en el botón «iniciar descarga», se puede ver la animación de progreso en la barra de progreso.

Crear una barra de progreso con etiqueta

Para agregar una etiqueta numérica que indique qué tan lejos está el usuario en el proceso, se requiere agregar un nuevo elemento dentro o fuera de la barra de progreso que mostrará el estado del progreso.

Para agregar una etiqueta, realice los siguientes cambios en el código anterior en el elemento «myprogressbar».

CSS

#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}

Realice los siguientes cambios en la función «actualizar» y «escena» para que la etiqueta numérica se actualice junto con el progreso en la barra de progreso.

JavaScript

<script>
  
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
    
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}
  
</script>

A continuación se muestra el programa completo usando HTML, CSS y JavaScript para crear una barra de progreso con etiqueta:

HTML

<!DOCTYPE html>
<html>
<style>
  
#Progress_Status {
  width: 50%;
  background-color: #ddd;
}
  
#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 32px;
  color: black;
}
  
  
</style>
<body>
  
<h3>Example of Progress Bar Using JavaScript</h3>
  
<p>Download Status of a File:</p>
  
<div id="Progress_Status">
  <div id="myprogressBar">1%</div>
</div>
  
<br>
<button onclick="update()">Start Download</button> 
  
<script>
  
function update() {
  var element = document.getElementById("myprogressBar");   
  var width = 1;
  var identity = setInterval(scene, 10);
  function scene() {
    if (width >= 100) {
      clearInterval(identity);
    } else {
      width++; 
      element.style.width = width + '%'; 
      element.innerHTML = width * 1  + '%';
    }
  }
}
  
</script>
  
</body>
</html>

Producción :

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

CSS

JavaScript

HTML

CSS

JavaScript

HTML

Deja una respuesta Cancelar la respuesta