Uno de los elementos clave de cualquier sitio web moderno con el que se hubiera encontrado en Internet es una barra de progreso HTML. Los elementos de progreso de HTML5 se han convertido en una parte fundamental del diseño web que se utiliza para una amplia gama de tareas, ya sea para mostrar el estado de carga / descarga de archivos, transferencia de archivos, registro, instalación o cualquier tarea que esté en progreso y que deba completarse. Sin embargo, la codificación de una barra de progreso HTML que ofrece compatibilidad entre navegadores ha planteado un desafío complicado para los desarrolladores desde tiempos inmemoriales. En lugar de usar etiquetas div para crear una barra de progreso, HTML5 proporciona una forma extremadamente ingeniosa mediante el uso de la etiqueta HTML5 <progress>. En este artículo, discutiremos qué es el elemento de progreso HTML5, cómo darle estilo usando CSS, cómo animarlo usando JavaScript / jQuery,soluciones de compatibilidad entre navegadores para crear una barra de progreso HTML y, finalmente, alternativas para navegadores no compatibles. ¡Sin más preámbulos, aquí vamos!

Elemento <progreso> HTML5

El elemento semántico HTML5 <progress> se utiliza como indicador para mostrar el estado de finalización o progreso de una tarea, es decir, la cantidad de trabajo que queda por hacer. El elemento HTML5 <progress> actúa como una demostración de retroalimentación visual para que el usuario controle el estado de progreso de la tarea que se está realizando. Por lo general, se muestra en forma de una barra de progreso marcada con números o valores porcentuales.

Nota: Si desea mostrar un indicador (espacio en disco o almacenamiento), el elemento de progreso HTML5 no sería la elección correcta. En su lugar, debería utilizar la etiqueta HTML <meter> .

Sintaxis para crear una barra de progreso HTML

< progress value="" max="" >< /progress >

La <etiqueta de progreso> tiene 2 atributos clave: valor y máx. Estos 2 atributos definen cuánta parte (valor) de la tarea total (máx.) Se ha completado en la actualidad.

  • Valor: el atributo de valor indica la cantidad de tarea que se completa, que es el valor actual. Puede ser cualquier número entre 0 y el atributo máximo. En caso de que el atributo max esté ausente, el valor puede oscilar entre 0 y 1. En caso de que el atributo de valor esté ausente, la barra de progreso HTML será indeterminada. Ya no indicará el estado actual de finalización.
  • Max: el atributo max representa la cantidad total de trabajo necesario para completar una tarea. El valor de max no puede ser menor que 0 y por defecto está establecido en 1.

Aquí hay una demostración simple de la barra de progreso HTML utilizando el elemento de progreso HTML5:

01
02
03
04
05
06
07
08
09
10
<!DOCTYPE html>
<html>
 <head>
   <title>Progress Bar</title>
 </head>
 <body>
   <span>Progress:</span>
   <progress value="40" max="100"></progress>
 </body>
</html>

Estados indeterminados vs determinados del elemento de progreso HTML5

Como comentamos anteriormente, un elemento de progreso puede tener 2 estados: indeterminado o determinado. Todo depende de si el atributo de valor se menciona dentro de la etiqueta <progreso> se menciona o no. En caso de que no se especifique el atributo de valor, el resultado sería una barra de progreso HTML indeterminada que no muestra el estado actual de progreso. Lo contrario es cierto en el caso de una determinada barra de progreso HTML.

Aquí hay un ejemplo para ambos casos:

01
02
03
04
05
06
07
08
09
10
11
12
13
<!DOCTYPE html>
<html>
 <head>
   <title>Progress Bar</title>
 </head>
 <body>
   <span>Indeterminate Progress Bar:</span>
   <progress max="100"></progress>
   <br><br>
   <span>Determinate Progress Bar:</span>
   <progress value="35" max="100"></progress>
 </body>
</html>
Navegador cruzado

Elemento de progreso HTML5: compatibilidad entre navegadores

Navegador cruzado

Como puede ver arriba, el elemento Progress de HTML5 es compatible con todos los navegadores principales de escritorio y móviles y cubre el 97.45% de la base de usuarios de Internet en marzo de 2019. La única excepción importante es IE9 y versiones anteriores. Más adelante en el artículo, exploraremos diferentes formas de codificar los fallbacks necesarios para elevar la compatibilidad entre navegadores de nuestra barra de progreso HTML mediante el uso de un polyfill para agregar soporte para IE8-9.

Aplicar estilo a la barra de progreso HTML

Diseñar el elemento de progreso HTML es una tarea extremadamente ardua. El desafío aquí surge principalmente porque cada navegador interpreta la etiqueta <progress> de manera diferente. Cada uno de ellos usa sus propias pseudoclases específicas para diseñar la barra de progreso HTML. Puede ver en la figura siguiente cómo varios navegadores representan una barra de progreso HTML básica de una manera diferente. Debe agregar reglas de estilo por separado para cada uno de los tres navegadores con diferentes motores de renderizado:

  • Navegadores Blink / Webkit: Google Chrome, Opera y Safari
  • Navegador Moz - Mozilla Firefox
  • explorador de Internet

Si desea obtener más información sobre cómo funcionan los navegadores modernos y por qué los navegadores muestran contenido de manera inconsistente, puede consultar mi artículo anterior sobre Detección de funciones para la compatibilidad entre navegadores .

Navegador cruzado

Antes de pasar a las reglas específicas del navegador, veamos primero el selector de elementos de progreso básico de HTML5. Podemos usar el selector de progreso (o el selector de [valor] de progreso) para cambiar el color de fondo, la altura y el radio del borde de la barra de progreso.

1
2
3
4
5
6
7
8
progress{
            color: red; /*Works only with edge. Not applied to webkit and mozilla*/
            background-color: #6e6e6e; /*not applied to webkit. Works with firefox and Edge*/
            border: 0;
            width: 100px;
            height: 20px; /*works with all browsers*/
            border-radius: 9px; /*Not appied to value part in firefox. Works with Edge*/
        }

Sin embargo, el color de fondo y el radio del borde no funcionarán con Google Chrome y otros navegadores WebKit / Blink como se muestra a continuación. De hecho, eliminarán el estilo nativo predeterminado y lo reemplazarán con una barra de progreso verde y un fondo gris oscuro. En Firefox, las reglas de color de fondo y radio de borde se aplican a la barra de progreso exterior pero no al valor. Microsoft Edge obedece todas las reglas según lo previsto.

Navegador cruzado

Ahora, para crear una barra de progreso HTML compatible con todos los navegadores con apariencia uniforme en todos los navegadores, debemos apuntar a pseudoclases para los navegadores Webkit (Chrome, Opera y Safari) y Firefox.

  1. Los navegadores Webkit utilizan 2 pseudoclases para apuntar al elemento de progreso HTML5: -webkit-progress-bar y -webkit-progress-value .
    • -webkit-progress-bar: se utiliza para aplicar estilo a la barra de progreso exterior (contenedor). Puede cambiar el color de fondo y las propiedades de radio de borde y sombra de cuadro de la barra de progreso utilizando esta pseudoclase.
    • -webkit-progress-value: se utiliza para aplicar estilo a la barra de valores interna. Puede usar esta pseudoclase para cambiar el color de la parte del valor de la barra de progreso.
  2. Mozilla Firefox usa una sola pseudoclase : -moz-progress-bar para diseñar el elemento de valor de la barra de progreso HTML.
  3. Microsoft Edge e IE usan: -ms-fill pseudo class para agregar estilo como fondo degradado para valorar parte de la barra de progreso.

En resumen, ahora tenemos los siguientes selectores de CSS para agregar reglas de estilo a nuestra barra de progreso HTML:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* NON BROWSER SPECIFIC*/
       progress {
       }
       /* FOR WEBKIT BROWSERS*/
       progress::-webkit-progress-bar {
       }
       progress::-webkit-progress-value {
       }
       /* FOR FIREFOX */
       progress::-moz-progress-bar {
       }
       /* FOR MICROSOFT EDGE AND IE */
       custom-progress::-ms-fill {
       }

No olvide restablecer los estilos de navegador predeterminados. Para lograr esto, tendría que establecer la apariencia y las propiedades del borde en ninguna como se muestra a continuación:

1
2
3
4
5
6
7
progress {
            /* RESETS */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
        }

Barra de progreso de HTML básico

Ahora, usando estas pseudoclases de WebKit y Mozilla firefox, finalmente podemos crear nuestra barra de progreso básica con fondo gris claro (# 777), parte de progreso de valor azul claro ( rgb(20, 240, 221) )y esquinas redondeadas ( border-radius: 20px ).

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
  
<head>
    <title>Progress Bar</title>
    <style>
        /* IE and EDGE */
        progress {
            /* RESETS */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
  
            width: 300px;
            height: 15px;
            border-radius: 20px;
            background-color: #777;
            color: rgb(20, 240, 221);
        }
  
        /* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
        progress::-webkit-progress-bar {
            background-color: #777;
            border-radius: 20px;
 }
  
        progress::-webkit-progress-value {
            background-color: rgb(20, 240, 221);
            border-radius: 20px;
        }
  
        /* MOZILLA FIREFOX */
        progress::-moz-progress-bar {
            background-color: rgb(20, 240, 221);
            border-radius: 20px;
        }
    </style>
</head>
  
<body>
   <h1>HTML PROGRESS BAR </h1>
   <span>Progress:</span>
   <progress value="40" max="100"></progress>
   <span> 40%</span>
</body>
  
  
</html>
Navegador cruzado

Barra de progreso HTML con fondo degradado a rayas

Podemos llevar nuestro estilo un paso más allá para crear una barra de progreso HTML con rayas y fondo degradado. Simplemente agregue las reglas de estilo -webkit-linear-gradient y -moz-linear-gradient a :: - webkit-progress-value y :: - moz-progress-bar pseudoclases.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
/* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
       progress::-webkit-progress-bar {
           background-color: #777;
           border-radius: 20px;
       }
 
       progress::-webkit-progress-value {
           background-image:
               -webkit-linear-gradient(45deg, transparent 40%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 70%, transparent 70%),
               -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
               -webkit-linear-gradient(left, #1abc9c, #3498db);
           border-radius: 20px;
       }
 
       /* MOZILLA FIREFOX */
       progress::-moz-progress-bar {
           background-image:
               -moz-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 70%),
               -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
               -moz-linear-gradient(left, #1abc9c, #3498db);
           border-radius: 20px;
       }
 
       /* MICROSOFT EDGE & IE */
       .custom-progress::-ms-fill {
           border-radius: 18px;
           background: repeating-linear-gradient(45deg, #1abc9c, #1abc9c 10px,#3498db 10px, #3498db 20px);
       }
Navegador cruzado
Navegador cruzado

Barra de progreso HTML animada

Ahora que ha aprendido a crear y aplicar estilos a las barras de progreso utilizando el elemento de progreso HTML, el paso final es agregar animación. En la mayoría de los casos, las barras de progreso HTML se utilizan junto con JavaScript o jQuery. Usaremos JavaScript para agregar la animación de expansión hacia la derecha desde el valor 0 hasta el valor máximo, incrementándose en pasos predefinidos. Usaremos la misma barra de progreso de degradado rayada que hicimos anteriormente y le agregaremos animación. Primero crearemos una variable llamada "progreso". Almacene el valor del elemento de progreso de id "custom-bar" dentro de él. Establezca los atributos "valor" y "máximo" del elemento Progreso HTML en 0 y 100 respectivamente. Siempre que el valor de la variable "progreso" sea menor que el valor máximo del atributo, la variable "progreso" sigue incrementándose en 10 cada 1 segundo.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>HTML5 Progress Bar</title>
  <style>
      /* CROSS BROWSER SELECTOR*/
      .custom-progress {
          /* RESETS */
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          border: none;
 
          width: 100%;
          height: 30px;
          border-radius: 20px;
          background-color: #777;
          color: #e74c3c;
      }
 
      /* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
      .custom-progress::-webkit-progress-bar {
          background-color: #777;
          border-radius: 20px;
      }
 
      .custom-progress::-webkit-progress-value {
          background-image:
              -webkit-linear-gradient(45deg, transparent 40%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 70%, transparent 70%),
              -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
              -webkit-linear-gradient(left, #f1c40f, #e74c3c);
          border-radius: 20px;
      }
 
      /* MOZILLA FIREFOX */
      .custom-progress::-moz-progress-bar {
          background-image:
              -moz-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 70%),
              -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
              -moz-linear-gradient(left, #f1c40f, #e74c3c);
          border-radius: 20px;
      }
 
      /* MICROSOFT EDGE & IE */
      .custom-progress::-ms-fill {
          border-radius: 18px;
          background: repeating-linear-gradient(45deg,
          #f1c40f,
          #f1c40f 10px,
          #e74c3c 10px,
          #e74c3c 20px);
      }
  </style>
  <style>
      .wrapper {
          width: 70%;
          margin: 0 auto;
          text-align: center;
      }
  </style>
</head>
 
<body>
  <div class="wrapper">
      <h1>Animating HTML Progress Bar Using JavaScript</h1>
      <progress id="custom-bar" class="custom-progress" max="100" value="0">0%</progress>
  </div>
 
  <script>
      setInterval(function () {
          var progress = document.getElementById('custom-bar');