¿Cómo crear una barra de progreso en HTML?

Las barras de progreso se utilizan para determinar ciertos hitos durante una tarea en un porcentaje. Puede crear una barra de progreso en que especifica el progreso de finalización de una tarea. JavaScript puede manipular el valor de la barra de progreso. En este artículo, veremos cómo puede crear una barra de progreso con la ayuda de HTML, CSS y JavaScript en la siguiente secuencia:

• ¿Cómo crear una barra de progreso en HTML?
• Barra de progreso: ejemplo

Vamos a empezar.

¿Cómo crear una barra de progreso en HTML?

Una barra de progreso muestra el progreso de cualquier tarea que se esté llevando a cabo. Generalmente, estas barras se utilizan para mostrar el estado de carga y descarga. 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 , se deben realizar los siguientes pasos:

• Crea una estructura HTML para tu barra de progreso - El HTML etiqueta especifica un progreso de finalización de una tarea.

• Añadiendo CSS - El siguiente paso es agregar el color de fondo de la barra de progreso, así como el estado de progreso en la barra con la ayuda de CSS .

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

• Agregar JavaScript - El siguiente paso es crear una barra de progreso animada dinámica usando funciones javascript actualizar y escena .

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 + '%'}}}

Ahora que conoce los diferentes pasos para crear una barra de progreso, sigamos adelante y echemos un vistazo al ejemplo completo de una barra de progreso.

Barra de progreso: ejemplo

Una vez que haya completado los diferentes pasos para crear una barra de progreso, es hora de vincular el HTML, CSS y Elementos de JavaScript . El siguiente ejemplo muestra el código completo de la barra de progreso que vincula lo anterior HTML, CSS y JavaScript Codigos:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Ejemplo de barra de progreso con JavaScript
 
Estado de descarga de un archivo:
  
Iniciar descarga función 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 + '%'}}}

Salida:

lado del mapa unirse en colmena

Con esto, hemos llegado al final de nuestro artículo. Espero que haya entendido los diferentes pasos necesarios para crear una barra de progreso.

Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo convierte en un experto en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.

Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios de este blog y nos comunicaremos con usted.