Core · Avisos y estado
Progreso
Muestra cuánto ha avanzado una tarea que lleva tiempo, mediante el elemento progress nativo.
Ejemplo
Dos barras de progreso: una carga al 25 por ciento y una compilación al 67 por ciento.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
Un progress sin clase no necesita ninguna: tiene el tamaño del componente y el color de marca en su relleno.
<label for="upload">Uploading report.pdf</label>
<progress id="upload" value="25" max="100">25%</progress>.luz-progress dibuja ella misma la pista y el relleno. Con la clase:
<label for="upload">Uploading report.pdf</label>
<progress class="luz-progress" id="upload" value="25" max="100">25%</progress>Variantes y opciones
Una clase. El estado se establece con atributos nativos.
| Atributo | Efecto |
|---|---|
value y max | Cuánto se ha completado; max vale 1 si no lo indicas |
no hay value | Indeterminado: la tarea está en curso, pero se desconoce cuánto durará |
Cómo funciona
El elemento nativo <progress>, con estilos de components/progress.css: una barra de 8 px, del ancho completo, con el color de marca como relleno y un borde de 1 px del color del borde del campo, para que se vea toda su longitud en cualquier superficie.
- El navegador expone el rol y el valor a las tecnologías de asistencia.
- En los navegadores Chromium y WebKit, el relleno se desliza hasta el nuevo valor; con el movimiento reducido, salta directamente.
- Con colores forzados, la barra conserva un borde y muestra el relleno con el color de resaltado del sistema.
Sin JavaScript
La barra muestra el valor del marcado. Para cambiarlo necesitas tu propio script, que establece value.
Teclado y ARIA
Una barra de progreso no es interactiva y no recibe el foco.
- Asígnale un nombre con un elemento
<label>o conaria-labelcuando no se muestre ninguna etiqueta. - Los lectores de pantalla no anuncian cada cambio. Anuncia el inicio y el final en una región dinámica cortés (
role="status").
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa una barra de progreso para tareas que duren más de unos segundos, como una carga o una compilación.
Cuándo no usarlo
No uses una barra de progreso para un valor que no represente una tarea.
- Para una medida dentro de un intervalo conocido, como el espacio de almacenamiento usado, usa un medidor.
- No la uses como decoración.
Qué hacer y qué no
Cómo escribir el contenido
Indica qué está pasando, no solo la cifra: «Subiendo informe.pdf».
- Incluye la cifra en el nombre o junto a la barra: «Carga, 25 %».
- Cuando termine, indícalo: «Carga completada».
Contraste y foco
La parte completada usa el color de marca sobre una pista apagada. La pista tiene un borde del color del borde del campo, para que se vea dónde acaba la barra.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Parte completada frente a la pista | --luz-brand-primary on --luz-surface-muted | 5.6:1 | 7.7:1 | 13.5:1 | 3:1 |
Borde de la pista sobre la página | --luz-input-border on --luz-surface-page | 3.7:1 | 4.2:1 | 21.0:1 | 3:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.
- Foco: la barra no lo recibe.
- No solo color: escribe la cifra junto a la barra o inclúyela en su nombre, para que el valor nunca dependa de distinguir las dos partes de la barra.
Tokens que usa
Los 6 tokens que lee components/progress.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
El teclado y ARIA están en la pestaña Código.