Progress Ring (progresso circular)

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.

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

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.

Uma barra ou um anel se preenche conforme o usuário rola a página ou o artigo.

Adicione um "Scroll Progress Indicator" (também chamado de reading progress bar) em [onde].
Uma barra fina no topo deve se preencher da esquerda para a direita conforme o leitor rola, chegando à largura total no final.
Ligue-a diretamente à posição de rolagem, sem atraso de suavização, e não deixe que ela cubra o conteúdo.

Blocos cinza de placeholder aparecem e esmaecem suavemente para indicar carregamento.

Adicione um "Pulse Placeholder" (também chamado skeleton pulse) em [onde].
Blocos cinza no formato do conteúdo que vai chegar devem clarear e voltar devagar, todos juntos, em um ritmo suave e constante.
Faça os placeholders seguirem o layout real para que nada pule quando o conteúdo chegar, e deixe-os parados se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um brilho claro passa por cima de formas cinza de placeholder.

Adicione um "Skeleton Shimmer" (também chamado skeleton wave ou shimmer effect) em [onde].
Uma faixa de luz suave deve atravessar as formas cinza da esquerda para a direita e fazer uma pausa curta antes da próxima passada: fluido e sem pressa.
Faça as formas seguirem o layout real para que nada pule quando o conteúdo carregar, e mostre placeholders estáticos se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma barra fina no topo da página avança aos poucos durante a navegação e se completa ao carregar.

Adicione uma barra de carregamento (Top Loading Bar) em [onde], também chamada page progress bar.
Uma barra fina na borda superior deve avançar rápido no início e depois cada vez mais devagar enquanto a página carrega; quando o carregamento terminar, ela deve correr até o fim e esmaecer.
Nunca deixe que ela chegue ao fim antes de o carregamento realmente terminar, e não deixe que ela cubra ou desloque o conteúdo da página.