W3Docs

Apariencia

Español

Etiqueta HTML <progress> ​

La etiqueta <progress> es uno de los elementos HTML5. Se utiliza para mostrar el progreso de una tarea (barra de progreso). Los valores de la barra de progreso que cambian dinámicamente deben definirse con scripts (JavaScript).

La apariencia del elemento puede diferir según el navegador y el sistema operativo.

Recomendamos usar la etiqueta <meter> para representar un indicador (por ejemplo, la relevancia de un resultado de búsqueda).

Sintaxis ​

La etiqueta <progress> va en pares. El contenido se escribe entre las etiquetas de apertura (<progress>) y cierre (</progress>).

Ejemplo de la etiqueta HTML <progress>: ​

Etiqueta HTML <progress>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="35" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Try it Yourself »

Resultado ​

progress tag example

Barra de progreso ​

Una barra de progreso puede ser indeterminada o determinada.

Es más fácil dar estilo a la barra de progreso indeterminada, ya que no tiene el atributo value. Podemos darle estilo usando la cláusula de negación de CSS :not().

La barra de progreso determinada se selecciona mediante el selector progress[value]. Añade dimensiones a tu barra de progreso con las propiedades CSS width y height y establece appearance en none:

Estilizar barras de progreso ​

Chrome, Safari y la última versión de Opera (16+) pertenecen a esta categoría. El estilo de la apariencia del elemento <progress> se puede aplicar usando -webkit-appearance: progress-bar.

Establece -webkit-appearance: none; para restablecer los estilos predeterminados.

Ejemplo de una barra de progreso

css
progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 15px;
}

Ejemplo del estado determinado de la barra de progreso: ​

Ejemplo de una barra de progreso determinada:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="30" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Try it Yourself »

Después de esto, puedes tener problemas porque distintos navegadores proporcionan pseudo-elementos separados para dar estilo a la barra de progreso. Para resolver este problema, puedes usar alternativas.

WebKit/Blink proporciona dos pseudo-elementos:

  • ::-webkit-progress-bar, que da estilo al contenedor del elemento de progreso.
  • ::-webkit-progress-value, que da estilo al valor dentro de la barra de progreso.

Da estilo a ::-webkit-progress-bar con diferentes propiedades CSS:

Ejemplo de una barra de progreso

css
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}

Da estilo a ::-webkit-progress-value, que es lo mismo que la barra, con varios fondos degradados para distintos propósitos. Usa el prefijo -webkit- para los degradados:

webkit-progress-value

css
progress[value]::-webkit-progress-value {
  background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
  border-radius: 4px;
  background-size: 20px 15px, 100% 100%, 100% 100%;
}

Ejemplo de la etiqueta HTML <progress> usada con propiedades CSS: ​

Ejemplo de la etiqueta HTML <progress> con propiedades CSS:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #cccccc;
        border-radius: 4px;
      }
      progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
        border-radius: 4px;
        background-size: 20px 15px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Try it Yourself »

Firefox ​

Usando appearance: none podemos eliminar el bisel y relieve predeterminados. Sin embargo, esto deja un ligero borde en Firefox, que puede eliminarse usando border: none. Esto también resuelve el problema del borde en Opera 12.

Ejemplo de la barra <progress> en Firefox

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Try it Yourself »

Firefox proporciona un único pseudo-elemento (::-moz-progress-bar) que puede usarse para seleccionar el valor de la barra de progreso. En otras palabras, no podemos dar estilo al fondo del contenedor en Firefox.

Etiqueta HTML <progress> - Firefox

css
progress[value]::-moz-progress-bar {
  background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient( left, #ff00f7, #4e922a);
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

Firefox no admite los pseudo-elementos ::before ni ::after en la barra de progreso, y no permite animación CSS3 de keyframes en la barra de progreso, lo que ofrece una experiencia más limitada.

Ejemplo de la etiqueta HTML <progress> para Firefox: ​

Ejemplo de la etiqueta HTML <progress> para Firefox:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value]::-moz-progress-bar {
        background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, 
                          rgba(0, 0, 0, 0.1) 66%, transparent 66%), 
                          -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), 
                          rgba(0, 0, 0, 0.25)),
                          -moz-linear-gradient( left, #ff00f7, #4e922a);
        background-size: 35px 20px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="35" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Try it Yourself »

Ejemplo de un caso de uso interesante de una barra de progreso al desplazarte por la página ​

Aquí tienes un ejemplo de cómo crear una barra de progreso que muestra cuánto has desplazado la página:

ejemplo de cómo crear una barra de progreso que muestra cuánto has desplazado la página

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #ddd;
      }

      #progress-bar-fill {
        height: 100%;
        background-color: blue;
        width: 0%;
      }
    </style>
  </head>
  <body>
    <div id="progress-bar">
      <div id="progress-bar-fill"></div>
    </div>

    <h1>Scrollable Content</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>

    <script>
      window.addEventListener("scroll", function () {
        var progressBarFill = document.getElementById("progress-bar-fill");
        var scrollPosition = window.scrollY;
        var totalHeight = document.body.scrollHeight - window.innerHeight;
        var percentage = (scrollPosition / totalHeight) * 100;
        progressBarFill.style.width = percentage + "%";
      });
    </script>
  </body>
</html>
Try it Yourself »

En este ejemplo, tenemos un elemento div de posición fija con un id de progress-bar que sirve como contenedor de la barra de progreso. Dentro de este contenedor, tenemos otro elemento div con un id de progress-bar-fill que sirve como la barra de progreso real.

Hemos usado CSS para establecer el ancho y la altura iniciales de la barra de progreso, así como los colores de fondo de la barra de progreso y del relleno de la barra.

También hemos incluido un detector de eventos de JavaScript que escucha el evento scroll en el objeto window. Cuando el usuario se desplaza por la página, calculamos la posición de desplazamiento y la altura total de la página, y luego calculamos el porcentaje de la página que se ha desplazado. Actualizamos la propiedad width del elemento progress-bar-fill para reflejar este porcentaje, actualizando así la barra de progreso.

Puedes copiar este código en un nuevo archivo HTML y abrirlo en tu navegador web para ver cómo se ve. A medida que te desplazas por la página, la barra de progreso se actualizará para reflejar cuánto has desplazado. Puedes ajustar la altura y el color de la barra de progreso según tus necesidades.

Atributos ​

AttributeValueDescription
maxnumberDefines the maximum value of the current process. The value can be a positive number bigger than 0.
valuenumberDefines the size of the completed task. The value can be a number from 0 to the number indicated in the max attribute, or a number in the range from 0 to 1 if the max attribute isn’t specified.

La etiqueta <progress> también admite los atributos globales y los atributos de evento.

Práctica ​

What does the HTML progress tag represent?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.