Loading motion patterns
Skeletons, progress and the hand-off to real content. Motion that says work is happening without promising when it ends.
React + Motion · new patterns added daily
Avatar Group Load
ReactOverlapping faces deal themselves out along the stack, then the overflow count lands.
Background Refresh Hint
ReactA two-pixel tinted band travels the panel's top edge while data refetches, without interrupting reading.
Cache Hit Instant
ReactCached content gets no entrance at all; only the values that actually changed animate.
Carousel Preload Slide
ReactThe upcoming frame resolves from placeholder to artwork a beat before the track moves to it.
Chart Bars Grow
ReactBars rise out of the baseline in reading order, with the axis landing first so there is something to measure against.
Code Block Highlight Load
ReactPlain code gains its syntax colors in one soft pass once the highlighter finishes.
Content Placeholder Pulse
ReactPlaceholder blocks rise and fall together on one slow cadence, so the region reads as dormant rather than busy.
Dashboard Tiles Cascade
ReactMetric tiles resolve corner to corner in a diagonal wave instead of arriving as one slab.
Download Arrow Progress
ReactThe download glyph floods with color from the bottom as the transfer advances.
Empty to Loaded Count
ReactA stat card sitting at zero rolls up to its real figure once the data resolves.
File Upload Progress
ReactA file row's bar fills as bytes land while the percentage and the counter roll with it.
Image Blur Up
ReactA tiny blurred stand-in holds the frame and sharpens into the full picture, with nothing below it moving.
Indeterminate Bar
ReactA slim segment crosses the top edge on a loop for work whose length nobody can predict.
Infinite Scroll Footer
ReactA footer spinner fills a slot that was already reserved, and the next page fades in above it.
Lazy Section Reveal
ReactA below-the-fold section fades and lifts the first time it comes into view, and never again after that.
Long Task Estimate
ReactA bar for work measured in minutes, with the time-remaining wording softening as it runs out.
Map Tiles Load
ReactTiles fade in out of order over the placeholder grid, the way a real map delivers them.
Optimistic Row Insert
ReactThe new entry lands at half opacity the instant it is asked for, then firms up when the server agrees.
Page Transition Fade
ReactThe outgoing view sinks a few pixels as it fades while the incoming one rises to meet it.
Determinate Progress Ring
ReactA ring fills from empty to full while the percentage counts up inside it.
Pull to Refresh
ReactDragging past a threshold arms the refresh, and the indicator tracks the finger the whole way.
Search Results Swap
ReactStale answers dim and stay put while the fresh set cross-fades over them.
Shimmer Sweep
ReactA soft highlight travels across placeholder blocks, each one a beat behind the last.
Skeleton to Content
ReactBreathing placeholders hand off to the real content in one cross-fade and a small lift.
Spinner to Check
ReactThe waiting arc finishes its turn, closes into a full ring, and the confirming stroke lands inside it.
Staggered List Entrance
ReactRows fade and lift into place about fifty milliseconds apart, top to bottom.
Step Progress Fill
ReactA segmented bar sweeps one stage at a time while each label lifts to full strength as it becomes current.
Streaming List Append
ReactLive matches dock at the bottom of the list as they arrive, nudging the tally in the header.
Table Rows Populate
ReactPlaceholder cells resolve one column at a time, so the eye follows the fill instead of hunting for it.
Video Buffer Ring
ReactThe frame dims and a turning arc holds over it, then dissolves outward on resume.