Pull to Refresh

Un elemento sigue al cursor al arrastrarlo y puede limitarse a un área o a un eje.

Añade una interacción de arrastrar (Drag) en [dónde], también llamada draggable o drag constraints.
El elemento debe seguir al cursor directamente mientras se arrastra, detenerse en los bordes de su área permitida y volver a su posición de reposo con un pequeño rebote al soltarlo.
Haz que funcione tanto con toque como con ratón sin que la página se desplace debajo, y ofrece una forma de moverlo con el teclado.

Un anillo o arco gira sin parar para indicar que algo está cargando.

Añade un "Circular Spinner" (también llamado spinner o throbber) en [dónde].
Un arco debe girar a ritmo constante alrededor de un anillo tenue mientras se alarga y se acorta, suave y continuo.
Haz que el giro sea continuo, dale una etiqueta de carga para lectores de pantalla y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un panel sube desde el borde inferior, a menudo arrastrable y con alturas de anclaje.

Añade un "Bottom Sheet Slide-Up" (también llamado bottom drawer o sheet) en [dónde].
El panel debe subir desde el borde inferior mientras la página de detrás se oscurece, frenando con suavidad hasta su sitio y sin rebote.
Reprodúcelo una vez cada vez que se abra el panel, bájalo de nuevo al cerrarlo y mantén el foco del teclado dentro del panel mientras esté abierto.

Una onda circular se expande y se desvanece desde el punto exacto del clic o toque.

Añade un efecto "Ripple" (también llamado material ripple o ink ripple) en [dónde].
En cada clic o toque, una onda circular suave debe extenderse desde el punto exacto pulsado hasta cubrir el elemento, desvaneciéndose mientras crece: rápida y ligera.
Recorta la onda a la forma del elemento, deja que cada pulsación rápida inicie su propia onda, y hazla empezar desde el centro al pulsar con el teclado.

Un círculo y una marca de verificación se dibujan solos para confirmar que la acción se completó.

Añade una animación "Success Checkmark" (también llamada animated success tick) en [dónde].
Un círculo debe dibujarse de un solo trazo suave, luego la marca se dibuja dentro y todo el símbolo da un pequeño salto suave: tranquilo y seguro.
Reprodúcela una vez cuando la acción tenga éxito, acompáñala de un mensaje de texto que los lectores de pantalla puedan anunciar, y muestra el símbolo terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Deslizar una fila de la lista hacia un lado muestra botones de acción como eliminar o archivar.

Añade una interacción "Swipe to Delete" (también llamada swipe actions o swipe to reveal) en [dónde].
Al arrastrar una fila hacia un lado, debe moverse directamente con el dedo para descubrir detrás botones de acción como archivar y eliminar, deteniéndose cuando se ven por completo, y al soltar se desliza con suavidad a su sitio sin rebote.
Mantén el scroll vertical funcionando mientras se desliza en horizontal, y haz que las mismas acciones sean accesibles con teclado y lector de pantalla sin deslizar.