Datos: métricas y filas

Un sparkline sin librería

Para mostrar «cómo va la semana» no hace falta un paquete de gráficos de medio megabyte: siete barras con alturas en variables CSS lo cuentan igual de bien. El sparkline de esta página es eso — flexbox alineado abajo y una variable --v por barra — y por eso puedes alimentarlo desde tu backend imprimiendo un número por elemento. Cuando de verdad necesites zoom, tooltips y ejes, entonces sí: librería. Mientras tanto, esto pesa cero.

Cómo usar estas piezas

1. Copia el CSS y el HTML de la pieza. Los valores de ejemplo (alturas, porcentajes, cifras) están como variables o estilos en línea para que tu plantilla los imprima directamente.
2. Mantén los atributos ARIA que traen: el role="progressbar" con sus valores y la etiqueta del sparkline explican al lector de pantalla lo que el ojo ve.
3. Usa font-variant-numeric: tabular-nums —ya incluido— en cualquier número que cambie: evita que la cifra baile al actualizarse.

El skeleton: carga percibida, no decoración

El esqueleto de carga funciona porque promete estructura: enseña la silueta de lo que viene y el brillo que la recorre dice «esto avanza». Úsalo cuando la carga real supere unos 300 ms y sustitúyelo por el contenido en cuanto llegue — un esqueleto que dura demasiado genera más ansiedad que una pantalla vacía. Marca el contenedor con aria-hidden mientras es esqueleto, como hace la receta, para que el lector de pantalla no anuncie cajas grises.

Dónde encajan

• Paneles y dashboards: métricas arriba, sparkline al lado, tabla debajo — el conjunto entero está en esta página.
• Estados de proceso: la barra de progreso para subidas y exportaciones; la lista densa con badges para colas de trabajo.
• Páginas que cargan datos: el skeleton mientras llega la respuesta.
• Informes y comparativas: la tabla compacta con números alineados a la derecha, como se leen los números.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, vidrio y neón, bento grid, botones y controles, tarjetas, formularios y microinteracciones. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿Cómo conecto el sparkline a datos reales?

Imprime una barra por punto de datos con su altura en la variable: . La conversión de tu valor real a porcentaje la haces al generar el HTML, normalizando contra el máximo de la serie.

¿Por qué los números van con tabular-nums?

Porque en la mayoría de fuentes los dígitos tienen anchos distintos, y una cifra que se actualiza baila. Con font-variant-numeric: tabular-nums cada dígito ocupa lo mismo y las columnas de números quedan alineadas de verdad.

¿La barra de progreso es accesible?

Sí: lleva role="progressbar" con aria-valuenow, aria-valuemin y aria-valuemax. Cuando actualices el ancho visual, actualiza también aria-valuenow — es un cambio de atributo en la misma línea de JS.

¿Cuándo usar la lista densa y cuándo la tabla?

La lista densa cuando cada fila es un objeto con estado (archivo, tarea, pedido) y la acción vive en la fila. La tabla cuando el valor está en comparar columnas entre filas. Si dudas, pregúntate qué escanea el ojo: ¿filas o columnas?

¿El skeleton debería parecerse al contenido final?

En silueta, sí: mismo número de líneas, misma disposición aproximada. Así el cambio a contenido real no salta. No hace falta precisión de píxel — hace falta que la promesa de estructura se cumpla.

¿Cómo hago la tabla responsive?

Para pocas columnas, envuélvela en un contenedor con overflow-x: auto y deja que se desplace. Para tablas anchas de verdad, replantea: en móvil suele funcionar mejor convertir cada fila en una tarjeta apilada.