Feedback

Barra de progreso

Comunica el avance de una operación que se puede medir. Para esperas de duración desconocida está el spinner.

Uso

Es una clase: progress se aplica sobre un <progress> nativo, que ya lleva el avance en value y el total en max. La barra ocupa todo el ancho de su contenedor, así que el tamaño lo controla lo que la envuelve.


<progress class="progress" value="60" max="100"></progress>

Sin avance medible

Un <progress> sin value es indeterminado, y la barra recorre la pista de lado a lado.


<progress class="progress"></progress>

Tokens semánticos

TokenQué es
--progress--duration--sweepLa duración de un recorrido de la barra indeterminada de un extremo al otro.