Pull to Refresh (puxar para atualizar)

Um elemento segue o ponteiro ao ser arrastado e pode ser limitado a uma área ou a um eixo.

Adicione uma interação "Drag" (também chamada draggable ou drag constraints) em [onde].
O elemento deve seguir o ponteiro diretamente enquanto é arrastado, parar nas bordas da área permitida e voltar à posição de repouso com um pequeno quique ao ser solto.
Faça funcionar tanto com toque quanto com mouse, sem a página rolar por baixo, e ofereça uma forma de movê-lo pelo teclado.

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 painel sobe a partir da borda inferior, muitas vezes arrastável e com alturas de encaixe.

Adicione um "Bottom Sheet Slide-Up" (também chamado bottom drawer ou sheet) em [onde].
O painel deve subir a partir da borda inferior enquanto a página de trás escurece, desacelerando suavemente até o lugar, sem quique.
Reproduza uma vez sempre que o painel abrir, faça-o descer de novo ao fechar, e mantenha o foco do teclado dentro do painel enquanto estiver aberto.

Uma onda circular se expande e some a partir do ponto exato do clique ou toque.

Adicione um efeito "Ripple" (também chamado material ripple ou ink ripple) em [onde].
A cada clique ou toque, uma onda circular suave deve se espalhar a partir do ponto exato pressionado até cobrir o elemento, sumindo enquanto cresce: rápida e leve.
Recorte a onda no formato do elemento, deixe cada toque rápido iniciar sua própria onda e faça ela começar do centro quando acionada pelo teclado.

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

Deslizar uma linha da lista para o lado revela botões de ação como excluir ou arquivar.

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.