Todos los componentes (204)
Cinta de progreso
Superficies · ReadingProgress
Qué es y cuándo usarlo
La cinta fina pegada arriba (o abajo) de la ventana que dice cuánto llevas leído de una página larga. Se mide sola al desplazar.
Cuándo usarlo
- Artículos, guías, condiciones legales: páginas largas que se leen de arriba abajo.
- Una por página, montada una vez: escucha el desplazamiento de la ventana entera, no el de un contenedor.
Cuándo no
- Una tarea que avanza y acaba (subir, importar):
Progress. - Un nivel que sube o baja (espacio usado, stock):
Gauge. - Una página que cabe entera en la ventana: no hay nada que recorrer y la cinta sale llena.
Teclado: no es enfocable ni se puede pulsar (pointer-events: none).
Accesibilidad: por defecto es decoración y se declara como tal (aria-hidden): un porcentaje que cambia con cada giro de la rueda, en voz alta, no hay quien lo aguante, y lo leído ya se sabe leyendo. withLabel la convierte en un progressbar llamado «Progreso de lectura», con el valor redondeado («62 % leído»); ese nombre no se puede cambiar. La medida va dentro de un requestAnimationFrame, para no recalcular el diseño en cada evento de desplazamiento.
Aspecto fino: sin variables propias: se ajusta con las clases amset-reading, amset-reading--top/--bottom (según position) y amset-reading--<tone> (accent por defecto). Va en position: fixed, en la capa --amset-layer-reading; el alto lo pone thickness (3 px por defecto).
En esta página: cada historia va en su propio marco. Baja dentro de él para ver la cinta avanzar.
Cómo se ve
Baja por esta página: la cinta de arriba de esta caja avanza con lo que llevas leído. En una página de verdad va pegada al borde de la ventana.
<ReadingProgress tone="accent" thickness={4} />
<article>...</article>Props
Se importa con import { ReadingProgress } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
className | string | Se une a las clases de la biblioteca, no las sustituye. |
position | "top" | "bottom" | Pegada arriba o abajo del todo. Por defecto arriba. |
thickness | number | Alto de la cinta. Por defecto 3 px. |
tone | "neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | El color de lo leido. `neutral` es el gris de la tinta secundaria. Por defecto, `accent`. |
withLabel | boolean | La cuenta tambien con numeros y para el lector de pantalla. Por defecto no: una cinta de lectura es decoracion, y anunciar el porcentaje en cada scroll es insoportable. |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: