Choose skeletons when layout context matters more than showing generic activity.

Use shimmer as an enhancer to skeletons, not as the whole loading strategy.

Choose a spinner only when you need the smallest possible loading signal.

Choose a progress bar when the user needs confidence about how much work remains.

Three animated dots that pulse sequentially, indicating that an AI or person is typing a response. Creates anticipation and confirms the system is processing.

A gentle fade-in-fade-out animation applied to placeholder content, creating a "breathing" effect. Softer and more subtle than shimmer.

Content fades in while simultaneously transitioning from blurred to sharp focus, creating a cinematic reveal effect. More sophisticated than a simple fade.

List items or grid cards appear one after another with a small delay between each, creating a cascading reveal effect. Adds rhythm and polish to content-heavy pages.

Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.

Elements remain hidden until they enter the browser viewport, then smoothly fade in and slide up into position. Makes scrolling feel like an active discovery process.

A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.

Choose button loading for async actions whose feedback belongs exactly where the user acted.

Choose fade when the best motion is the one users barely notice.

A quick horizontal shaking motion applied to an element (like an input field) to indicate invalid input or an error, mimicking a head shake.

Choose toast when feedback should be seen but not answered.

A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.

A physical-feeling spring animation that rapidly shrinks an element on press and bounces it back on release, mimicking a tactile physical button.

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

A visual indicator (like a filling ring or background) that shows the progress of a long-press action before it executes.

A gesture-driven reveal of a loading indicator when a user scrolls past the top edge of a content area, triggering a data refresh.

A subtle, bouncing horizontal nudge on a list item indicating that it can be swiped to reveal hidden actions (like delete or archive).

A sliding thumb across a pill-shaped track, communicating a change in binary state (on/off) with color transitions.

An expressive animation heavily scaling and expanding a heart or star icon, sometimes accompanied by mini confetti or a splash ring.

A rapid, transient background color change (usually to green or a brand color) on an element that was just copied to the clipboard, providing unmistakable visual confirmation.

When dragging an item, the original item remains lowered in opacity as a "placeholder", while a slightly scaled-up, shadowed "ghost" follows the cursor.

A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.

A view or component enters the screen by sliding linearly from an edge, providing spatial context about where the user is navigating to.

Choose modal motion when the interaction should pause the page without feeling like a new page.

When opening a dropdown menu or a list, the items appear sequentially from top to bottom, drawing the eye down the list.

An SVG checkmark that progressively draws itself from left to right inside a circle, confirming a successful action.

A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.

An element (like an image or card) seamlessly animates from its position in a list view into its final position in a detail view, bridging the context between two states.

A panel that slides in from the left or right edge of the screen, pushing content or overlapping it with a dark backdrop.

A highlighting background or underline that smoothly glides from the currently selected tab to the newly clicked tab, reinforcing spatial relationship.

A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.

Background elements move at a different speed than foreground elements while scrolling, creating an illusion of 3D depth and immersion.

A softly animated graphic (like a floating ghost or swaying box) accompanied by friendly text suggesting the next action when a list or dashboard is empty.

A playful loop or glitch effect applied to a 404 number or illustration to reduce the frustration of hitting a dead end.

A glowing, pulsating ring around a specific UI element intended to draw a brand new user's attention to the first action they should take.

A bar or toast that slides down from the top of the interface natively indicating the application has lost internet connection, remaining fixed until connection is restored.

An animation (often a magnifying glass looking back and forth) that plays when a search query returns zero results, softening the frustrating dead end.

A more aggressive, persistent pulsing or shaking error state specifically denoting that a system failure or timeout occurred.

Small red helper text that gracefully slides down from underneath an input field the moment the user tabs away with an invalid entry.

A joyful explosion of colorful particles from the center or edges of the screen to celebrate a major user milestone.

The inverse of a checkmark draw; a red X SVG that sharply draws its two crossing lines to confirm a failure or rejection.

When a notification badge value increments, the number scales up and down bouncy, and occasionally the badge itself pulses.

A circular SVG ring that visually fills its stroke perimeter based on a percentage value, moving smoothly as progress updates.

A dramatic transition where, upon completing a major flow, the entire screen or container slides over or fades into a dedicated success view.

A loading bar where the indicator continually bounces back and forth or cycles infinitely, showing that a process is working but the exact completion time is unknown.

Images load as low-res blurs or empty blocks and gently crossfade into their full high-resolution versions instead of popping in jarringly line-by-line.

Static, non-animated geometric shapes representing where text or images will render. Simpler than a skeleton screen, often used on lower-end devices or ultra-fast loads.

A highly customized, vector-based animation (often exported from After Effects via Lottie) that serves as a branded loading state.

Numbers that accurately count down to zero, building anticipation or imposing a limit.

Often an overlapping circle array or a dotted spinner indicating that a media stream has paused to download more data.

Similar to a shimmer loader, but animates a soft gradient wave that sweeps diagonally across multiple skeleton blocks sequentially.

Bar charts that animate from a height of zero up to their final data value upon entering the screen, making the data feel impactful.

When filtering or changing datasets, SVG lines or pie slices seamlessly morph from one shape to the next instead of snapping instantly.

A horizontal bar chart representing timeseries data where the bars continually sort themselves on the Y-axis as their X-values increase/decrease over time.

A background image or layer that moves vertically at a slower rate than the foreground content as the user scrolls, creating a 3D depth effect.

As the user scrolls down a list, the category header sticks to the top of the viewport until pushed out by the next category header.

Large typographic paragraphs where the text color or opacity transitions from faded to solid exactly mapped to the user's scroll position.

A section of the page where vertical scrolling temporarily translates into horizontal scrolling to reveal a gallery of cards or images, before continuing vertically.

The entire screen dims with a dark overlay, except for a highlighted "cutout" over a specific UI element, paired with an explanatory tooltip.

As a user completes onboarding tasks, list items animate a strikethrough, a checkmark draws itself, and the entire item fades into a completed state, often filling a master progress bar.

A glossy card element where a soft, radial gradient spotlight perfectly tracks the user's mouse position over the surface, creating a physical "glare" effect.

A button or card where a vibrant gradient beam continuously travels around its perimeter, similar to a meteor running along a track.

When the mouse gets close to this button, the entire button (and its text) physically pulls towards the cursor, as if magnetized. It snaps back playfully when the mouse leaves.

Text does not simply fade in; instead, it aggressively scrambles through random characters or numbers before locking into the intended legible English phrase.

A deeply blurred, slow-moving set of vibrant gradient blobs (mesh gradient) that simulates the aurora borealis or viscous fluid, often set behind text or empty states.

A side navigation or progress bar where a glowing "beam" of light physically traces a curved SVG path downwards as the user scrolls, matching their vertical progression.

Cards that literally tilt on their X and Y axes in response to mouse movement. Internal elements (like a logo or image) often move at a faster rate to simulate true 3D depth.

A full page transition that begins as a small circle at the user's click coordinate, rapidly expanding outward like a liquid ripple to overtake the screen and reveal the new view.

A top-anchored capsule that fluidly morphs into a larger notification card, accommodating new UI controls, and smoothly reverts to a resting pill shape.

A picture or content card that detects the exact edge (top, right, bottom, left) the mouse cursor enters from, and slides an information overlay in from that specific direction. It exits out the same edge the mouse leaves.

A modernized input field where the placeholder text gracefully shrinks, changes color, and floats to the top edge of the input boundary when focused or filled.

A smooth, interpolating bar that physically stretches and continuously shifts color from red (weak) to yellow (fair) to green (strong) as the user types.

Initially just a circular search magnifying glass icon. Upon interaction, it elastically unravels horizontally into a full active text input field.

A seamless vertex-to-vertex transformation between two distinct icons (e.g., Play -> Pause, Menu -> Close), fluidly shifting shapes rather than just a hard cut swap.

A card that physically turns around in 3D space along its Y or X axis to reveal content on its "back" side, like a flashcard or a playing card.

A list item that can be dragged horizontally with high elasticity. Dropping it reveals under-the-fold action buttons (like Delete/Archive) with an elastic rubber-band snap.

Use Active Pill Slide when the selected container itself should move; use Tab Underline Slide when only navigation emphasis should move.