Donut Chart Fill (gráfico de rosca animado)

Um arco cresce em volta de um anel para mostrar a porcentagem concluída.

Adicione um progresso circular (Progress Ring) em [onde], também chamado circular progress ou radial progress.
Começando no topo, um arco deve crescer no sentido horário ao redor do anel para mostrar a porcentagem concluída, desacelerando suavemente ao parar, enquanto o número no centro sobe junto.
Mantenha o arco e o número sincronizados, e exponha o valor com a semântica correta de barra de progresso para leitores de tela.

Os elementos do gráfico passam suavemente dos valores antigos para os novos quando os dados mudam ou o conjunto de dados é alternado.

Adicione um "Chart Data Transition" (também chamado chart update animation) em [onde].
Quando os dados mudarem, todas as barras devem deslizar ao mesmo tempo do valor antigo para o novo, suaves e sem pressa, em vez de serem redesenhadas a partir do zero.
Comece cada atualização a partir dos valores que estão na tela para uma segunda mudança rápida não pular, e aplique os novos valores na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um anel ou arco gira continuamente para mostrar que algo está carregando.

Adicione um "Circular Spinner" (também chamado spinner ou throbber) em [onde].
Um arco deve girar de forma constante em volta de um anel suave enquanto se alonga e encurta, fluido e contínuo.
Mantenha a rotação contínua, dê a ele um rótulo de carregamento para leitores de tela e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um número conta de um valor inicial até um valor final quando fica visível.

Adicione um contador animado (Number Ticker) em [onde], também chamado count up ou animated counter.
Quando o número entrar na tela, ele deve contar de zero até o valor final, rápido no começo e desacelerando suavemente ao chegar.
Use dígitos de largura fixa para nada ao redor tremer, conte só uma vez e mostre o valor final de imediato para leitores de tela e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Cada dígito rola na vertical até o novo valor quando um número muda.

Adicione uma animação de números "Odometer" (também chamada rolling numbers ou slot-machine digits) em [onde].
Quando o valor mudar, cada dígito deve rolar na vertical até o novo dígito, sempre para a frente, com um leve escalonamento entre os dígitos e uma pequena acomodação no final.
Mantenha todos os dígitos com a mesma largura para o número não se deslocar, e exponha só o valor final para leitores de tela.

Linhas e pontos se animam entre locais em um mapa ou globo.

Adicione "Animated Map Arcs" (também chamado globe arcs) em [onde].
Linhas curvas devem se desenhar uma após a outra entre locais em um mapa pontilhado e depois se recolher em direção ao destino enquanto um anel suave pulsa ali: calmo e constante.
Escalone os arcos para nunca se moverem ao mesmo tempo, mantenha o loop contínuo e pause-o se o usuário preferir movimento reduzido (prefers-reduced-motion).