Success Checkmark
Também chamada Animated success tick
Um círculo e um tique se desenham sozinhos para confirmar que a ação deu certo.
Onde usar
Envio de formulário, pagamento concluído
Variações
- SVG stroke draw
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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).Animações parecidas
Clique
Checkbox Check Draw
Também chamada Animated checkbox, Checkmark draw
Ao marcar a caixa, um sinal de visto é desenhado traço a traço dentro dela.
Onde usar
Formulários, listas de tarefas
Adicione uma animação "Checkbox Check Draw" (também chamada animated checkbox ou checkmark draw) em [onde].
Quando a caixa for marcada, ela deve se preencher de cor e o sinal de visto deve se desenhar sozinho em um traço rápido e suave; ao desmarcar, ele se apaga do mesmo jeito.
Mantenha como um checkbox de verdade, com seu estado de marcado, funcionando pelo teclado e com um anel de foco visível.Line Drawing
Também chamada Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Um traço SVG parece ser desenhado ao longo do caminho conforme o deslocamento do tracejado é animado.
Onde usar
Ícones, logos e ilustrações
Adicione uma animação "Line Drawing" (também chamada path drawing ou self-drawing SVG) em [onde].
Cada traço deve parecer se desenhar sozinho, suavemente, ao longo do caminho do início ao fim, e um segundo traço, como um sinal de visto, deve vir logo depois do primeiro.
Reproduza só uma vez ao entrar na tela, sem repetir, e mostre as linhas já desenhadas se o usuário preferir movimento reduzido (prefers-reduced-motion).Clique
Copy-to-Clipboard Feedback
Também chamada Copied state, Copy icon to checkmark
O ícone de copiar se transforma em um sinal de visto e o rótulo mostra Copiado por um instante.
Onde usar
Blocos de código, links de compartilhamento
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.Progress Ring (progresso circular)
Também chamada Circular progress, Radial progress, Animated Circular Progress Bar
Um arco cresce em volta de um anel para mostrar a porcentagem concluída.
Onde usar
Uploads, metas, temporizadores
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.Mais em Micro-interaction
Arraste
Swipe to Delete
Também chamada Swipe actions, Swipe to reveal
Deslizar uma linha da lista para o lado revela botões de ação como excluir ou arquivar.
Onde usar
Listas de e-mail, listas de tarefas
Adicione uma interação "Swipe to Delete" (também chamada swipe actions ou swipe to reveal) em [onde].
Ao arrastar uma linha para o lado, ela deve acompanhar o dedo diretamente para revelar por trás botões de ação como arquivar e excluir, parando quando estiverem totalmente visíveis, e ao soltar deslizar suavemente para o lugar, sem quique.
Mantenha a rolagem vertical funcionando durante o deslize horizontal, e deixe as mesmas ações acessíveis por teclado e leitor de tela sem precisar deslizar.Clique
Toggle Switch
Também chamada Switch, Switch Thumb Slide
Um botão redondo desliza por um trilho e a cor do trilho muda entre desligado e ligado.
Onde usar
Configurações, modo escuro
Adicione uma animação "Toggle Switch" (também chamada switch) em [onde].
Ao ligar ou desligar, o botão redondo deve deslizar suavemente até a outra ponta do trilho enquanto a cor do trilho muda: rápido e nítido, sem quique.
Mantenha como um switch acessível real (role="switch" com seu estado checked) que também funcione pelo teclado.A
1
Clique
Add to Cart Fly
Também chamada Fly to cart, Add-to-cart animation
A imagem do produto encolhe e voa em arco até o ícone do carrinho.
Onde usar
E-commerce
Adicione uma animação "Add to Cart Fly" (também chamada fly to cart ou add-to-cart animation) em [onde].
Quando o botão de adicionar for pressionado, uma pequena cópia da imagem do produto deve encolher enquanto voa em um arco suave e rápido até o ícone do carrinho, e o carrinho deve dar um pequeno pulo ao atualizar a contagem.
Reproduza uma vez por clique sem mover o card original do produto, e pule o voo se o usuário preferir movimento reduzido (prefers-reduced-motion), mas continue atualizando o carrinho.