Bar Chart Grow (gráfico de barras animado)

Barras horizontais trocam de posição ao longo do tempo conforme os valores mudam.

Adicione um "Bar Chart Race" (também chamado racing bar chart) em [onde].
As barras horizontais devem crescer e encolher conforme os valores mudam ao longo do tempo e deslizar suavemente umas pelas outras sempre que a posição mudar, cada uma mantendo seu rótulo.
Mova as barras com transformações em vez de reordenar o markup, para as trocas deslizarem em vez de pular, e dê aos usuários uma forma de pausar.

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

Barras verticais crescem e encolhem fora de fase, como um equalizador de áudio.

Adicione uma animação de carregamento "Bar Loader (Equalizer)" (também chamada bars loader ou audio bars) em [onde].
Algumas barras verticais devem esticar e encolher fora de sincronia entre si como um equalizador de áudio, em um ritmo animado mas constante.
Mantenha o loop contínuo, dê a ela um rótulo de status para leitores de tela e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma barra se preenche da esquerda para a direita na proporção do andamento da tarefa.

Adicione uma barra de progresso (Determinate Progress Bar) em [onde], também chamada progress bar fill ou progress indicator.
A barra deve se preencher da esquerda para a direita acompanhando o progresso real, com transições suaves entre as atualizações, e mostrar a porcentagem ao lado.
Use a semântica correta de barra de progresso com valores atual, mínimo e máximo para que leitores de tela consigam lê-la, e nunca deixe o preenchimento voltar.

Um anel ou gráfico de pizza se preenche no sentido horário até sua porcentagem.

Adicione um gráfico de rosca animado (Donut Chart Fill) em [onde], também chamado pie chart sweep ou animated donut chart.
Começando pelo topo, cada segmento deve se preencher no sentido horário, um de cada vez, até o anel mostrar sua participação, desacelerando suavemente ao terminar.
Reproduza só uma vez quando o gráfico entrar na tela e deixe os valores reais disponíveis como texto para leitores de tela.