Button Loading State

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

O ícone de copiar se transforma em um sinal de visto e o rótulo mostra Copiado por um instante.

Adicione uma animação "Copy-to-Clipboard Feedback" (também chamada copied state ou copy icon to checkmark) em [onde].
Quando o botão de copiar for pressionado, o ícone de copiar deve encolher rapidamente enquanto um sinal de visto é desenhado e o rótulo muda para "Copiado"; depois de um breve momento, tudo volta suavemente.
Mantenha o botão do mesmo tamanho durante a troca para que nada se desloque e anuncie o estado de copiado para leitores de tela.

Um círculo e um tique se desenham sozinhos para confirmar que a ação deu certo.

Adicione uma animação "Success Checkmark" (também chamada animated success tick) em [onde].
Um círculo deve se desenhar em um único traço suave, depois o tique se desenha dentro dele e o símbolo inteiro dá um pequeno salto suave: calmo e confiante.
Reproduza uma vez quando a ação der certo, acompanhe com uma mensagem de texto que leitores de tela possam anunciar, e mostre o símbolo pronto de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

Segurar um item pressionado por um instante dispara ações extras ou um preenchimento de progresso.

Adicione uma interação de toque longo (Long Press) (também chamada press and hold ou touch and hold) em [onde].
Enquanto o item estiver pressionado, ele deve afundar um pouco enquanto um preenchimento de progresso o percorre em ritmo constante; ao completar, ele volta com um leve quique e abre o menu, e soltar antes cancela e zera o preenchimento.
Dê aos usuários de teclado e leitor de tela outra forma de chegar às mesmas ações, e não deixe o toque selecionar texto nem abrir o menu de contexto do navegador.

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 segmento de barra percorre a trilha repetidamente quando a duração é desconhecida.

Adicione uma barra de progresso indeterminada (Indeterminate Linear Progress) em [onde], também chamada indeterminate progress bar.
Um segmento curto deve percorrer a trilha de uma ponta à outra várias vezes, rápido e suave, enquanto a duração da tarefa for desconhecida.
Faça o segmento entrar e sair totalmente da trilha para que o loop não tenha emendas visíveis, e marque-a como barra de progresso ocupada para leitores de tela.