← All patterns

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

React

Overlapping faces deal themselves out along the stack, then the overflow count lands.

loadingfriendlysubtle

Background Refresh Hint

React

A two-pixel tinted band travels the panel's top edge while data refetches, without interrupting reading.

loadingsubtlecalm

Cache Hit Instant

React

Cached content gets no entrance at all; only the values that actually changed animate.

loadingpremiumsubtle

Carousel Preload Slide

React

The upcoming frame resolves from placeholder to artwork a beat before the track moves to it.

loadingelegantpremium

Chart Bars Grow

React

Bars rise out of the baseline in reading order, with the axis landing first so there is something to measure against.

loadingpremiumenergetic

Code Block Highlight Load

React

Plain code gains its syntax colors in one soft pass once the highlighter finishes.

loadingfuturisticsubtle

Content Placeholder Pulse

React

Placeholder blocks rise and fall together on one slow cadence, so the region reads as dormant rather than busy.

loadingcalmsubtle

Dashboard Tiles Cascade

React

Metric tiles resolve corner to corner in a diagonal wave instead of arriving as one slab.

loadingpremiumenergetic

Download Arrow Progress

React

The download glyph floods with color from the bottom as the transfer advances.

loadingminimalsubtle

Empty to Loaded Count

React

A stat card sitting at zero rolls up to its real figure once the data resolves.

loadingfriendlycalm

File Upload Progress

React

A file row's bar fills as bytes land while the percentage and the counter roll with it.

loadingminimalfriendly

Image Blur Up

React

A tiny blurred stand-in holds the frame and sharpens into the full picture, with nothing below it moving.

loadingpremiumelegant

Indeterminate Bar

React

A slim segment crosses the top edge on a loop for work whose length nobody can predict.

loadingminimalsubtle

Infinite Scroll Footer

React

A footer spinner fills a slot that was already reserved, and the next page fades in above it.

loadingsubtlecalm

Lazy Section Reveal

React

A below-the-fold section fades and lifts the first time it comes into view, and never again after that.

loadingelegantcalm

Long Task Estimate

React

A bar for work measured in minutes, with the time-remaining wording softening as it runs out.

loadingcalmpremium

Map Tiles Load

React

Tiles fade in out of order over the placeholder grid, the way a real map delivers them.

loadingfuturisticcalm
interactive

Optimistic Row Insert

React

The new entry lands at half opacity the instant it is asked for, then firms up when the server agrees.

loadingfriendlyminimal

Page Transition Fade

React

The outgoing view sinks a few pixels as it fades while the incoming one rises to meet it.

loadingelegantpremium

Determinate Progress Ring

React

A ring fills from empty to full while the percentage counts up inside it.

loadingminimalpremium
interactive

Pull to Refresh

React

Dragging past a threshold arms the refresh, and the indicator tracks the finger the whole way.

loadingfriendlyenergetic

Search Results Swap

React

Stale answers dim and stay put while the fresh set cross-fades over them.

loadingcalmminimal

Shimmer Sweep

React

A soft highlight travels across placeholder blocks, each one a beat behind the last.

loadingsubtleelegant

Skeleton to Content

React

Breathing placeholders hand off to the real content in one cross-fade and a small lift.

loadingcalmminimal

Spinner to Check

React

The waiting arc finishes its turn, closes into a full ring, and the confirming stroke lands inside it.

loadingfriendlyminimal

Staggered List Entrance

React

Rows fade and lift into place about fifty milliseconds apart, top to bottom.

loadingfriendlyminimal

Step Progress Fill

React

A segmented bar sweeps one stage at a time while each label lifts to full strength as it becomes current.

loadingpremiumcalm

Streaming List Append

React

Live matches dock at the bottom of the list as they arrive, nudging the tally in the header.

loadingenergeticminimal

Table Rows Populate

React

Placeholder cells resolve one column at a time, so the eye follows the fill instead of hunting for it.

loadingminimalcalm

Video Buffer Ring

React

The frame dims and a turning arc holds over it, then dissolves outward on resume.

loadingminimalcalm