Progress Ring

Un anillo o un gráfico circular se rellena en sentido horario hasta su porcentaje.

Añade una animación "Donut Chart Fill" (también llamada pie chart sweep o animated donut chart) en [dónde].
Empezando por arriba, cada segmento debe barrer en sentido horario por turnos hasta que el anillo muestre su proporción, desacelerando con suavidad al terminar.
Reprodúcela una sola vez cuando el gráfico entre en pantalla y deja los valores reales disponibles como texto para los lectores de pantalla.

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).

Una barra se llena de izquierda a derecha en proporción al avance de la tarea.

Añade una barra de progreso determinada (Determinate Progress Bar, también llamada progress bar fill o progress indicator) en [dónde].
La barra debe llenarse de izquierda a derecha al ritmo del progreso real, con transiciones suaves entre actualizaciones, y mostrar el porcentaje a su lado.
Usa la semántica correcta de barra de progreso con valores actual, mínimo y máximo para que los lectores de pantalla puedan leerla, y nunca dejes que el relleno retroceda.

Una barra o un anillo se va llenando a medida que el usuario se desplaza por la página o el artículo.

Añade una barra de progreso de lectura (Scroll Progress Indicator, también llamada reading progress bar) en [dónde].
Una barra fina en la parte superior debe llenarse de izquierda a derecha según lo que el lector haya avanzado, hasta ocupar todo el ancho al final.
Vincúlala directamente a la posición del scroll, sin retraso de suavizado, y evita que tape el contenido.

Bloques grises de marcador de posición aparecen y se desvanecen suavemente para indicar que algo carga.

Añade un "Pulse Placeholder" (también llamado skeleton pulse) en [dónde].
Bloques grises con la forma del contenido que va a llegar deben aclararse y volver despacio, todos juntos, con un ritmo suave y constante.
Ajusta los marcadores a la maquetación real para que nada salte cuando llegue el contenido, y déjalos quietos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Sobre formas grises de marcador de posición pasa un brillo de luz de lado a lado.

Añade un "Skeleton Shimmer" (también llamado skeleton wave o shimmer effect) en [dónde].
Una franja de luz suave debe cruzar las formas grises de izquierda a derecha y hacer una breve pausa antes de la siguiente pasada: fluido y sin prisa.
Ajusta las formas a la maquetación real para que nada salte cuando cargue el contenido, y muestra marcadores estáticos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una barra fina en la parte superior de la página avanza poco a poco durante la navegación y se completa al cargar.

Añade una "Top Loading Bar" (también llamada page progress bar) en [dónde].
Una barra fina en el borde superior debe avanzar rápido al principio y luego cada vez más despacio mientras carga la página; cuando termine, debe correr hasta el final y desvanecerse.
Nunca dejes que llegue al final antes de que la carga termine de verdad, y evita que tape o desplace el contenido de la página.