HTML / CSS / JavaScript

Animación y microinteracciones

Carga, progreso, transiciones de estado y retroalimentación detallada.

64casos de categoría
Actualmente se muestran 64 casos
0004Animación y microinteracciones

Cambio de pestañas

Componente de pestañas con navegación por teclas de flecha y animación de cambio de contenido.

HTMLCSSJavaScriptTabs
Abrir y ejecutar
0009Animación y microinteracciones

Animación de carga creativa

Efecto visual de pulsación de órbita y progreso de carga hecho solo con CSS.

HTMLCSSAnimaciónLoading
Abrir y ejecutar
0012Animación y microinteracciones

animación de taichí giratorio

Un taiji yin-yang dibujado y girado solo con la figura CSS.

HTMLCSSAnimaciónTai chi
Abrir y ejecutar
0032Animación y microinteracciones

Cargador multietapa para subida de archivos

Completa un cargador de varias fases en un escenario de subida de archivos: incluye contenido realista, controles interactivos, estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar
0048Animación y microinteracciones

Transición de forma del botón de carga de archivos

Completa la transición de forma del botón en escenarios de carga de archivos: incluye contenido real, controles operables, estados claros de retroalimentación y diseños adaptados a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar
0064Animación y microinteracciones

Retroalimentación circular de progreso de subida de archivos

Completa la retroalimentación de progreso circular en un escenario de carga de archivos: incluye contenido real, controles operables, estados claros y diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de progreso circularHTMLCSS AnimationJavaScript
Abrir y ejecutar
0080Animación y microinteracciones

Transición de pantalla esqueleto para carga de archivos

En una carga de archivos, completa la transición de pantalla esqueleto: incluye contenido real, controles operables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición de pantalla esqueletoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0096Animación y microinteracciones

Entrada escalonada de subida de archivos

Crea una entrada escalonada para listas en un escenario de carga de archivos: incluye contenido real, controles operables, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesEntrada escalonada de la listaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0112Animación y microinteracciones

Cambio de estado de paginación en la carga de archivos

Completa una transición de cambio de página en un escenario de carga de archivos: incluye contenido real, controles interactivos, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescambio de estado de páginaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0128Animación y microinteracciones

Retroalimentación del control elástico de carga de archivos

Completa la retroalimentación de un control elástico en escenarios de carga de archivos: incluye contenido real, controles accionables, retroalimentación de estado clara y una disposición adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de controles elásticosHTMLCSS AnimationJavaScript
Abrir y ejecutar
0144Animación y microinteracciones

Aviso emergente de subida de archivos

Completa la retroalimentación emergente de notificaciones en el escenario de carga de archivos: incluye contenido real, controles accionables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0160Animación y microinteracciones

Animación de revelado del contenido de la carga de archivos

Animación de revelado de contenido en un escenario de carga de archivos: incluye contenido real, controles accionables, feedback de estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de revelado de contenidoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0176Animación y microinteracciones

Animación de estado de carga orbital de archivos

Completa una animación de estado orbital en un escenario de carga de archivos: incluye contenido real, controles utilizables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0192Animación y microinteracciones

Cargador multifase para herramienta de concentración

Completa el cargador de varias etapas en el escenario de la herramienta de concentración: incluye contenido real, controles operables, feedback de estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar
0208Animación y microinteracciones

Transición de forma del botón de la herramienta de enfoque

Completa la transición de forma de un botón en el escenario de herramienta de enfoque: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar
0224Animación y microinteracciones

Feedback de progreso en anillo para herramienta de enfoque

Completa una retroalimentación de progreso circular en un escenario de herramienta de enfoque: incluye contenido real, controles accionables, comentarios de estado claros y una distribución adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de progreso circularHTMLCSS AnimationJavaScript
Abrir y ejecutar
0240Animación y microinteracciones

Transición del esqueleto de carga para herramienta de enfoque

Completa una transición de pantalla esqueleto en escenarios de herramientas de concentración: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición de pantalla esqueletoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0256Animación y microinteracciones

Lista de entrada escalonada de herramienta de enfoque

Completa una entrada escalonada de lista en un contexto de herramienta de concentración: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesEntrada escalonada de la listaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0272Animación y microinteracciones

Cambio de estado con volteo para herramienta de concentración

Completa el cambio de estado al pasar de página en el contexto de una herramienta de concentración: incluye contenido real, controles interactivos, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescambio de estado de páginaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0288Animación y microinteracciones

retroalimentación de controles elásticos para herramienta de enfoque

Completa una respuesta elástica de control en un contexto de herramienta de enfoque: incluye contenido realista, controles accionables, retroalimentación de estado clara y maquetación adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de controles elásticosHTMLCSS AnimationJavaScript
Abrir y ejecutar
0304Animación y microinteracciones

Retroalimentación emergente de notificación de la herramienta de enfoque

En un escenario de herramienta de enfoque, se completa una notificación emergente de feedback: incluye contenido real, controles accionables, feedback de estado claro y diseño adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0320Animación y microinteracciones

Animación de revelado de contenido para herramienta de enfoque

Completa una animación de revelado de contenido en el escenario de la herramienta de enfoque: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de revelado de contenidoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0336Animación y microinteracciones

Animación de estado de órbita de la herramienta de enfoque

Completa la animación de estado orbital en un escenario de herramienta de concentración: incluye contenido real, controles interactivos, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0352Animación y microinteracciones

cargador multietapa del reproductor de música

Completa un cargador de varias etapas para un escenario de reproductor de música: incluye contenido realista, controles interactivos, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar
0367Animación y microinteracciones

Transición de forma del botón del reproductor de música

En el contexto de un reproductor de música, completa la transición de forma del botón: incluye contenido real, controles interactivos, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar
0382Animación y microinteracciones

Retroalimentación de progreso circular del reproductor de música

En un reproductor de música, completa una retroalimentación de progreso circular: incluye contenido real, controles interactivos, estados claros y una disposición adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de progreso circularHTMLCSS AnimationJavaScript
Abrir y ejecutar
0397Animación y microinteracciones

Transición de pantalla esqueleto para reproductor de música

Completa una transición con pantalla esqueleto para un escenario de reproductor de música: incluye contenido real, controles interactivos, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición de pantalla esqueletoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0411Animación y microinteracciones

Entrada escalonada de la lista del reproductor de música

Completa una entrada escalonada de lista para un escenario de reproductor de música: incluye contenido real, controles accionables, una clara retroalimentación de estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesEntrada escalonada de la listaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0424Animación y microinteracciones

Cambio de estado de página del reproductor de música

Completa el cambio de estado de página en el escenario del reproductor de música: incluye contenido real, controles interactivos, feedback de estado claro y diseño adaptable a distintos tamaños.

Animación y microinteraccionescambio de estado de páginaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0437Animación y microinteracciones

Retroalimentación elástica para reproductor de música

Completa una retroalimentación elástica de controles en un escenario de reproductor de música: incluye contenido real, controles operables, retroalimentación de estado clara y diseño adaptable a varios tamaños.

Animación y microinteraccionesRetroalimentación de controles elásticosHTMLCSS AnimationJavaScript
Abrir y ejecutar
0450Animación y microinteracciones

Notificación emergente de reproductor de música

Completa un feedback emergente de notificación en un escenario de reproductor de música: incluye contenido real, controles interactivos, estados claros y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0461Animación y microinteracciones

Animación de revelado de contenido del reproductor de música

Completa la animación de revelado de contenido en el escenario del reproductor de música: incluye contenido real, controles operables, feedback de estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de revelado de contenidoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0471Animación y microinteracciones

Animación de estado de la pista del reproductor de música

Completa una animación de estado de pista en un escenario de reproductor musical: incluye contenido real, controles accionables, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0479Animación y microinteracciones

Cargador multietapa del estado del pedido

Completa un cargador de varias etapas para escenarios de estado de pedido: con contenido real, controles accionables, feedback de estado claro y diseño adaptable a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar
0487Animación y microinteracciones

Transición de forma del botón de estado del pedido

Completa una transición de forma de botón en un escenario de estado de pedido: incluye contenido real, controles interactivos, feedback de estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar
0493Animación y microinteracciones

Retroalimentación de progreso en anillo para el estado del pedido

Completa una retroalimentación de progreso en anillo en el escenario del estado del pedido: incluye contenido real, controles utilizables, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de progreso circularHTMLCSS AnimationJavaScript
Abrir y ejecutar
0498Animación y microinteracciones

Transición de pantalla esqueleto para el estado del pedido

Completa una transición de pantalla de esqueleto en un escenario de estado de pedido: incluye contenido real, controles accionables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición de pantalla esqueletoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0502Animación y microinteracciones

Entrada escalonada de la lista de estados de pedido

Completa una entrada escalonada de lista para un escenario de estado de pedido: incluye contenido realista, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesEntrada escalonada de la listaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0506Animación y microinteracciones

Cambio de estado con volteo para el estado del pedido

Realiza una transición de cambio de página para escenarios de estado de pedido: incluye contenido real, controles operables, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescambio de estado de páginaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0510Animación y microinteracciones

Feedback del control elástico del estado del pedido

En el escenario de estado de pedido, completa una respuesta elástica del control: incluye contenido real, controles operables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de controles elásticosHTMLCSS AnimationJavaScript
Abrir y ejecutar
0514Animación y microinteracciones

Notificación emergente de estado del pedido

Completa una animación de notificación emergente en el contexto del estado del pedido: incluye contenido realista, controles accionables, retroalimentación de estado clara y una disposición adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0516Animación y microinteracciones

Animación de revelado del contenido del estado del pedido

Completa una animación de revelado de contenido en un escenario de estado de pedido: incluye contenido real, controles interactivos, comentarios claros de estado y diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de revelado de contenidoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0518Animación y microinteracciones

Animación orbital del estado del pedido

Completa una animación de estado orbital en un escenario de estado de pedido: incluye contenido real, controles operables, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0533Animación y microinteracciones

Transición de morphing de botón de sincronización de archivo

Completa una transición de forma del botón en escenarios de sincronización de archivo: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar
0558Animación y microinteracciones

Cargador multietapa de bandas de audio

Complete un cargador de varias etapas en un escenario de ondas de audio: incluye contenido realista, controles accionables, retroalimentación clara del estado y diseños adaptables a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar
0583Animación y microinteracciones

Actualización de la vista de estado con catálogo

Completa la transición de estado de página en un escenario de aviso de catálogo: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescambio de estado de páginaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0608Animación y microinteracciones

Notificación emergente de registro de catálogo

Completa una retroalimentación emergente de notificación en un escenario de registro de catálogo: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0633Animación y microinteracciones

Animación de estado orbital de catálogo en bucle

Completa una animación de estado orbital en un escenario de ciclo de catálogo: incluye contenido realista, controles interactivos, estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0658Animación y microinteracciones

Indicador de progreso en anillo pulsante del catálogo

Feedback de progreso circular completado en un escenario de pulso de catálogo: incluye contenido real, controles interactivos, una señalización de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de progreso circularHTMLCSS AnimationJavaScript
Abrir y ejecutar
0683Animación y microinteracciones

Animación de revelado de contenido de catálogo-signal

Completa una animación de revelado de contenido en el escenario del señalizador del catálogo: incluye contenido real, controles accionables, comentarios claros de estado y diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de revelado de contenidoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0708Animación y microinteracciones

Transición de pantalla esqueleto para sincronización de catálogo

Completa una transición de pantalla esqueleto en el escenario de sincronización del catálogo: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a varios tamaños.

Animación y microinteraccionesTransición de pantalla esqueletoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0733Animación y microinteracciones

Feedback elástico de control para rastreador de catálogo

Completar el feedback de control elástico en el escenario del rastreador de catálogo: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de controles elásticosHTMLCSS AnimationJavaScript
Abrir y ejecutar
0758Animación y microinteracciones

Entrada escalonada y desfasada en la lista de disparadores del catálogo

Completa la entrada escalonada de la lista en el escenario del disparador de catálogo: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesEntrada escalonada de la listaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0783Animación y microinteracciones

Transición de forma del botón de progreso del curso

Completa la transición de forma de botón en un escenario de progreso del curso: incluye contenido realista, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar
0808Animación y microinteracciones

Cargador de varias etapas para recordatorio de la clínica ambulatoria

Completa un cargador de varias fases en un contexto de recordatorio de consulta ambulatoria: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar
0833Animación y microinteracciones

Cambio de estado con volteo en la admisión de la clínica

Completa una transición de cambio de página en el contexto de registro clínico: incluye contenido real, controles accionables, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Animación y microinteraccionescambio de estado de páginaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0858Animación y microinteracciones

Feedback emergente de notificación cíclica de consulta

Completa un efecto emergente de notificación en un contexto de ciclo de consultas externas: incluye contenido real, controles interactivos, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0883Animación y microinteracciones

Animación de estado orbital de pulso ambulatorio

Completa una animación de estado orbital en el escenario de pulso de consulta externa: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0908Animación y microinteracciones

Retroalimentación de progreso circular en señal clínica

Feedback de progreso circular completado para el escenario de señal clínica ambulatoria: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de progreso circularHTMLCSS AnimationJavaScript
Abrir y ejecutar
0933Animación y microinteracciones

Animación de revelado de contenido por fases en consulta

Completa una animación de revelado de contenido en escenarios de fases ambulatorias: incluye contenido real, controles accionables, comentarios claros de estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de revelado de contenidoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0958Animación y microinteracciones

Transición de pantalla esqueleto para sincronización ambulatoria

Completa una transición de pantalla esqueleto en un contexto de sincronización en consulta externa: incluye contenido real, controles utilizables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición de pantalla esqueletoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0983Animación y microinteracciones

Feedback de controles elásticos del rastreador ambulatorio

Completa una experiencia de controles elásticos en el contexto de un seguimiento clínico: incluye contenido realista, controles interactivos, estados claros y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de controles elásticosHTMLCSS AnimationJavaScript
Abrir y ejecutar
1008Animación y microinteracciones

Entrada escalonada de la lista de activadores de consulta externa

Completa la entrada escalonada de una lista en un escenario de desencadenante ambulatorio: incluye contenido real, controles interactivos, indicaciones de estado claras y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesEntrada escalonada de la listaHTMLCSS AnimationJavaScript
Abrir y ejecutar
1033Animación y microinteracciones

Transición de forma del botón para el flujo de donación

Completa la transición de morfosis del botón en un flujo de donación: incluye contenido real, controles interactivos, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar