HTML / CSS / JavaScript

Animação e microinterações

Carregamento, progresso, transições de estado e feedback de detalhes.

64c categorias de exemplos
Exibindo atualmente 64 casos
0004Animação e microinterações

Troca de abas

Componente de abas com navegação por teclas de direção e animação de alternância de conteúdo.

HTMLCSSJavaScriptTabs
Abrir e executar
0009Animação e microinterações

Animação criativa de carregamento

Efeitos visuais de pulso orbital e progresso de carregamento feitos puramente com CSS.

HTMLCSSanimaçãoLoading
Abrir e executar
0012Animação e microinterações

Animação de taiji giratório

Um símbolo do yin-yang desenhado e girado apenas com a forma gráfica CSS.

HTMLCSSanimaçãoTaiji
Abrir e executar
0032Animação e microinterações

Carregador multietapas de upload de arquivos

Conclua um carregador em várias etapas em um cenário de upload de arquivos: inclui conteúdo real, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõescarregador em várias etapasHTMLCSS AnimationJavaScript
Abrir e executar
0048Animação e microinterações

Transição de forma do botão de upload de arquivo

Complete a transição da forma do botão em cenários de upload de arquivos: inclui conteúdo real, controles interativos, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar
0064Animação e microinterações

Feedback circular de progresso de upload de arquivo

Feedback de progresso circular concluído no contexto de envio de arquivos: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback de progresso circularHTMLCSS AnimationJavaScript
Abrir e executar
0080Animação e microinterações

Transição de skeleton screen para upload de arquivo

Conclua a transição de tela de esqueleto no cenário de upload de arquivos: inclui conteúdo real, controles utilizáveis, feedback de estado claro e layout em vários tamanhos.

Animação e microinteraçõesTransição de esqueletoHTMLCSS AnimationJavaScript
Abrir e executar
0096Animação e microinterações

Entrada escalonada da lista de upload de arquivos

Complete uma entrada escalonada em uma cena de upload de arquivos: inclui conteúdo real, controles operáveis, feedback de estado claro e layout adaptável a diferentes tamanhos de tela.

Animação e microinteraçõesEntrada escalonada da listaHTMLCSS AnimationJavaScript
Abrir e executar
0112Animação e microinterações

Transição de página para upload de arquivo

Realize a transição de página no contexto de upload de arquivos: com conteúdo real, controles interativos, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAlternância de estado por virada de páginaHTMLCSS AnimationJavaScript
Abrir e executar
0128Animação e microinterações

Feedback do controle elástico de envio de arquivos

Em cenários de upload de arquivos, implemente feedback elástico de componentes: incluindo conteúdo real, controles acionáveis, feedback de estado claro e layout entre tamanhos de tela.

Animação e microinteraçõesFeedback elástico dos controlesHTMLCSS AnimationJavaScript
Abrir e executar
0144Animação e microinterações

Feedback pop-up de upload de arquivos

Complete uma notificação pop-up de feedback no cenário de envio de arquivos: inclui conteúdo real, controles acionáveis, feedback claro de status e um layout responsivo em vários tamanhos.

Animação e microinteraçõesFeedback de notificação pop-upHTMLCSSJavaScript
Abrir e executar
0160Animação e microinterações

Animação de revelação de conteúdo no upload de arquivo

Animação de revelação de conteúdo concluída no cenário de upload de arquivos: inclui conteúdo real, controles interativos, feedback de status claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAnimação de revelação de conteúdoHTMLCSS AnimationJavaScript
Abrir e executar
0176Animação e microinterações

Animação de estado orbital de upload de arquivo

Animação de estado orbital concluída no cenário de upload de arquivos: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAnimação de status orbitalHTMLCSS AnimationJavaScript
Abrir e executar
0192Animação e microinterações

Carregador em várias etapas para ferramenta de foco

Conclua o carregador em várias etapas no cenário da ferramenta de foco: inclua conteúdo real, controles acionáveis, feedback claro de estado e um layout responsivo em diferentes tamanhos.

Animação e microinteraçõescarregador em várias etapasHTMLCSS AnimationJavaScript
Abrir e executar
0208Animação e microinterações

Transição de forma do botão da ferramenta de foco

Conclua a transição morfológica do botão no cenário de ferramenta de foco: inclui conteúdo real, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar
0224Animação e microinterações

Feedback de progresso em anel para ferramenta de foco

Concluir um feedback de progresso em anel em um cenário de ferramenta de foco: com conteúdo real, controles acionáveis, feedback de estado claro e layout em várias dimensões.

Animação e microinteraçõesFeedback de progresso circularHTMLCSS AnimationJavaScript
Abrir e executar
0240Animação e microinterações

Transição do esqueleto da ferramenta de foco

Conclua a transição da tela de esqueleto no cenário de ferramentas de foco: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout entre tamanhos de tela.

Animação e microinteraçõesTransição de esqueletoHTMLCSS AnimationJavaScript
Abrir e executar
0256Animação e microinterações

Lista de entrada em cascata da ferramenta de foco

Conclua a entrada escalonada da lista em um cenário de ferramenta de foco: inclui conteúdo real, controles operáveis, feedback de estado claro e layout em vários tamanhos.

Animação e microinteraçõesEntrada escalonada da listaHTMLCSS AnimationJavaScript
Abrir e executar
0272Animação e microinterações

Transição de virar páginas da ferramenta de foco

No cenário de ferramenta de foco, conclua a troca de estado ao virar a página: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo a vários tamanhos.

Animação e microinteraçõesAlternância de estado por virada de páginaHTMLCSS AnimationJavaScript
Abrir e executar
0288Animação e microinterações

Feedback de controle elástico da ferramenta de foco

Complete o feedback do controle elástico em um cenário de ferramenta de foco: inclui conteúdo real, controles acionáveis, feedback claro de status e layout responsivo para diferentes tamanhos.

Animação e microinteraçõesFeedback elástico dos controlesHTMLCSS AnimationJavaScript
Abrir e executar
0304Animação e microinterações

Feedback de pop-up de notificação da ferramenta de foco

Apresenta feedback de notificação pop-up em um cenário de ferramenta de foco: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout em diferentes tamanhos.

Animação e microinteraçõesFeedback de notificação pop-upHTMLCSSJavaScript
Abrir e executar
0320Animação e microinterações

Animação de revelação de conteúdo da ferramenta de foco

Conclua a animação de revelação de conteúdo no cenário da ferramenta de foco: inclui conteúdo real, controles operáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAnimação de revelação de conteúdoHTMLCSS AnimationJavaScript
Abrir e executar
0336Animação e microinterações

animação orbital do status da ferramenta de foco

No cenário de ferramenta de foco, conclua a animação de estado orbital: inclui conteúdo real, controles operáveis, feedback de status claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAnimação de status orbitalHTMLCSS AnimationJavaScript
Abrir e executar
0352Animação e microinterações

Carregador de vários estágios do player de música

Conclua um carregador em várias etapas para o cenário de player de música: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõescarregador em várias etapasHTMLCSS AnimationJavaScript
Abrir e executar
0367Animação e microinterações

Transição de forma do botão do tocador de música

No cenário do reprodutor de música, conclua a transição de forma do botão: com conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar
0382Animação e microinterações

Feedback circular de progresso do tocador de música

Conclua o feedback de progresso em anel em um cenário de player de música: com conteúdo real, controles acionáveis, feedback de estado claro e layout entre diferentes tamanhos.

Animação e microinteraçõesFeedback de progresso circularHTMLCSS AnimationJavaScript
Abrir e executar
0397Animação e microinterações

Transição de esqueleto para player de música

Realize uma transição de tela esqueleto em um contexto de player de música: inclui conteúdo real, controles interativos, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesTransição de esqueletoHTMLCSS AnimationJavaScript
Abrir e executar
0411Animação e microinterações

Entrada escalonada da lista do player de música

Finalize a entrada escalonada de uma lista em um cenário de tocador de música: inclui conteúdo real, controles acionáveis, feedback de status claro e layout em vários tamanhos.

Animação e microinteraçõesEntrada escalonada da listaHTMLCSS AnimationJavaScript
Abrir e executar
0424Animação e microinterações

Alternância de estado de virada do reprodutor de música

Complete a transição de estado de virar página no cenário do player de música: inclui conteúdo real, controles interativos, feedback de estado claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAlternância de estado por virada de páginaHTMLCSS AnimationJavaScript
Abrir e executar
0437Animação e microinterações

Resposta elástica dos controles do player de música

Conclua a resposta elástica dos controles em um cenário de player de música: inclui conteúdo real, controles interativos, feedback de status claro e layout responsivo em diferentes tamanhos.

Animação e microinteraçõesFeedback elástico dos controlesHTMLCSS AnimationJavaScript
Abrir e executar
0450Animação e microinterações

Feedback de pop-up de notificação do reprodutor de música

Conclua o feedback de pop-up de notificação no cenário de player de música: inclui conteúdo real, controles interativos, feedback de estado claro e layout responsivo em vários tamanhos.

Animação e microinteraçõesFeedback de notificação pop-upHTMLCSSJavaScript
Abrir e executar
0461Animação e microinterações

Animação de revelação de conteúdo do reprodutor de música

Conclua a animação de revelação de conteúdo no cenário do player de música: inclua conteúdo real, controles acionáveis, feedback claro de estado e um layout responsivo em diferentes tamanhos.

Animação e microinteraçõesAnimação de revelação de conteúdoHTMLCSS AnimationJavaScript
Abrir e executar
0471Animação e microinterações

Animação de estado da trilha do player de música

Conclua a animação de estado da faixa no cenário de um player de música: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo em diferentes tamanhos.

Animação e microinteraçõesAnimação de status orbitalHTMLCSS AnimationJavaScript
Abrir e executar
0479Animação e microinterações

Carregador multietapas do status do pedido

Conclua um carregador de várias etapas em um cenário de status de pedido: com conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo em diferentes tamanhos.

Animação e microinteraçõescarregador em várias etapasHTMLCSS AnimationJavaScript
Abrir e executar
0487Animação e microinterações

Transição de forma do botão de status do pedido

Conclua a transição da forma do botão no cenário de status do pedido: inclui conteúdo realista, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos de tela.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar
0493Animação e microinterações

Feedback de progresso em anel do status do pedido

Conclua o feedback de progresso em anel no cenário de status do pedido: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesFeedback de progresso circularHTMLCSS AnimationJavaScript
Abrir e executar
0498Animação e microinterações

Transição de tela de esqueleto do status do pedido

Conclua a transição do esqueleto no cenário de status do pedido: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesTransição de esqueletoHTMLCSS AnimationJavaScript
Abrir e executar
0502Animação e microinterações

Entrada escalonada na lista de status do pedido

Entrada escalonada da lista em cenários de status de pedidos: inclui conteúdo real, controles interativos, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesEntrada escalonada da listaHTMLCSS AnimationJavaScript
Abrir e executar
0506Animação e microinterações

Alternância de estado de virada de página para status do pedido

No cenário de status do pedido, conclua a troca de páginas de estado: com conteúdo real, controles operáveis, feedback de estado claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAlternância de estado por virada de páginaHTMLCSS AnimationJavaScript
Abrir e executar
0510Animação e microinterações

Feedback elástico de status do pedido

Monte um feedback elástico de controles em um cenário de status do pedido: com conteúdo real, controles operáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback elástico dos controlesHTMLCSS AnimationJavaScript
Abrir e executar
0514Animação e microinterações

Feedback pop-up de notificação do status do pedido

Conclua o feedback de pop-up de notificação no cenário do status do pedido: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback de notificação pop-upHTMLCSSJavaScript
Abrir e executar
0516Animação e microinterações

Animação de revelação do conteúdo do status do pedido

No cenário de status do pedido, conclua uma animação de revelação de conteúdo: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAnimação de revelação de conteúdoHTMLCSS AnimationJavaScript
Abrir e executar
0518Animação e microinterações

Animação do estado orbital do status do pedido

Conclua uma animação de estado orbital para o cenário de status do pedido: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAnimação de status orbitalHTMLCSS AnimationJavaScript
Abrir e executar
0533Animação e microinterações

Transição de morph do botão de sincronização de arquivo

Conclua a transição da forma do botão no cenário de sincronização de arquivo: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout entre tamanhos de tela.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar
0558Animação e microinterações

Carregador multietapas de bandas sonoras

Conclua o carregador em múltiplas etapas no cenário de faixa sonora: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõescarregador em várias etapasHTMLCSS AnimationJavaScript
Abrir e executar
0583Animação e microinterações

Alerta de catalogação com mudança de página de status

Em um cenário de alerta de catálogo, conclua a transição do estado da virada de página: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAlternância de estado por virada de páginaHTMLCSS AnimationJavaScript
Abrir e executar
0608Animação e microinterações

Notificação pop-up de check-in do catálogo

Complete o feedback de pop-up de notificação no cenário de check-in de catálogo: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback de notificação pop-upHTMLCSSJavaScript
Abrir e executar
0633Animação e microinterações

Animação de status orbital em loop do catálogo

Conclua uma animação de estado orbital em um cenário de ciclo de catalogação: inclui conteúdo real, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAnimação de status orbitalHTMLCSS AnimationJavaScript
Abrir e executar
0658Animação e microinterações

Feedback de progresso em anel pulsante do catálogo

Complete o feedback de progresso circular no cenário de pulse de catálogo: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback de progresso circularHTMLCSS AnimationJavaScript
Abrir e executar
0683Animação e microinterações

Animação de revelação de conteúdo sinalizado do catálogo

Concluir uma animação de revelação de conteúdo em um cenário de sinalização de catálogo: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout entre tamanhos de tela.

Animação e microinteraçõesAnimação de revelação de conteúdoHTMLCSS AnimationJavaScript
Abrir e executar
0708Animação e microinterações

Transição de tela de esqueleto para sincronização de catálogo

Conclua a transição de tela esqueleto no cenário de sincronização de catálogo: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo.

Animação e microinteraçõesTransição de esqueletoHTMLCSS AnimationJavaScript
Abrir e executar
0733Animação e microinterações

Feedback de controle elástico do rastreador de catalogação

Complete o feedback de controles elásticos no cenário do rastreador de catalogação: com conteúdo real, controles acionáveis, feedback de status claro e layout adaptado a diferentes tamanhos.

Animação e microinteraçõesFeedback elástico dos controlesHTMLCSS AnimationJavaScript
Abrir e executar
0758Animação e microinterações

Lista de gatilhos de catálogo com entrada escalonada

Completa a entrada escalonada da lista no cenário do gatilho de catálogo: inclui conteúdo real, controles operáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesEntrada escalonada da listaHTMLCSS AnimationJavaScript
Abrir e executar
0783Animação e microinterações

Transição de forma do botão de progresso da disciplina

Concluir uma transição de morfologia de botão no cenário de progresso do curso: inclui conteúdo real, controles interativos, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar
0808Animação e microinterações

Carregador de várias etapas para lembrete ambulatorial

Narre um carregador em várias etapas em um cenário de lembrete ambulatorial: inclui conteúdo real, controles interativos, feedback de estado claro e layout em várias dimensões.

Animação e microinteraçõescarregador em várias etapasHTMLCSS AnimationJavaScript
Abrir e executar
0833Animação e microinterações

Troca de estado na virada de página no check-in de clínica

Conclua a transição de estado de página no cenário de check-in ambulatorial: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAlternância de estado por virada de páginaHTMLCSS AnimationJavaScript
Abrir e executar
0858Animação e microinterações

Feedback emergente de notificação em ciclo ambulatorial

Conclua um feedback de pop-up de notificação no cenário de ciclo ambulatorial: com conteúdo real, controles acionáveis, feedback de estado claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesFeedback de notificação pop-upHTMLCSSJavaScript
Abrir e executar
0883Animação e microinterações

Animação de status orbital de pulso ambulatorial

Na cena do pulso ambulatorial, conclua a animação de estado orbital: inclui conteúdo real, controles operáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAnimação de status orbitalHTMLCSS AnimationJavaScript
Abrir e executar
0908Animação e microinterações

Feedback de progresso em anel da clínica

Conclua o feedback de progresso circular em um cenário de clínica: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback de progresso circularHTMLCSS AnimationJavaScript
Abrir e executar
0933Animação e microinterações

Animação de revelação de conteúdo por fases na clínica

Conclua uma animação de revelação de conteúdo em cenários de etapa ambulatorial: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout em diferentes tamanhos.

Animação e microinteraçõesAnimação de revelação de conteúdoHTMLCSS AnimationJavaScript
Abrir e executar
0958Animação e microinterações

Transição de esqueleto para sincronização ambulatorial

Transição de skeleton screen concluída em um cenário de sincronização em clínica: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesTransição de esqueletoHTMLCSS AnimationJavaScript
Abrir e executar
0983Animação e microinterações

Feedback de controles elásticos do rastreador ambulatorial

Complete o feedback do controle elástico no cenário do rastreador ambulatorial: inclui conteúdo real, controles interativos, feedback de estado claro e layout adaptável a vários tamanhos.

Animação e microinteraçõesFeedback elástico dos controlesHTMLCSS AnimationJavaScript
Abrir e executar
1008Animação e microinterações

Lista de gatilhos de ambulatório com entrada escalonada

Concluir a entrada escalonada da lista no cenário de gatilho do ambulatório: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo em diferentes tamanhos.

Animação e microinteraçõesEntrada escalonada da listaHTMLCSS AnimationJavaScript
Abrir e executar
1033Animação e microinterações

Transição de forma do botão de fluxo de doação

Conclua a transição de forma do botão em um cenário de fluxo de doação: com conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo entre tamanhos.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar