Behavior comparison
Skeleton shimmer vs Spring animation
Decisive difference
Skeleton shimmer addresses optional loading decoration; Spring animation addresses a damped physical response. They can be combined when both needs apply.
Choice criteria, links and sources
- Skeleton shimmerChoose Skeleton shimmer if you need optional loading decoration.Open entry Skeleton shimmer
- Spring animationChoose Spring animation if you need a damped physical response.Open entry Spring animation
See the nine dimensionsSee the sources
Motion & Effects
Try it
Does motion explain a change, report state, or only decorate?
Skeleton shimmer
Shared trial context
An item moves, changes state or waits for content. Which information must survive without motion?
Skeleton shimmer
Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.
Compare 1200 and 2400 ms per sweep. Speed changes the decoration, not the load. Show content completes this local simulation; no network request is made.
Spring animation
Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.
Change damping from 10 to 20 with mass 1 and stiffness 100. Less damping overshoots; critical damping settles without oscillation. The demo samples two seconds then snaps to the exact target.
What this example shows
Skeleton reserves the content shape; shimmer is optional decoration on that shape. Unlike a progress bar, neither measures completion.
Which fits your need?
Skeleton shimmer
Demonstrate a loading placeholder with reserved space and persistent Loading text.
Spring animation
Explain settling after a drag or a spatial change when a physical response helps orientation.
Difference and sources
Skeleton reserves the content shape; shimmer is optional decoration on that shape. Unlike a progress bar, neither measures completion.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Trigger
The control that opens or reveals the surface.
Decision
Family question
Does motion explain a change, report state, or only decorate?
Three criteria to choose
- Use case
Skeleton shimmer
Demonstrate a loading placeholder with reserved space and persistent Loading text.
Spring animation
Explain settling after a drag or a spatial change when a physical response helps orientation.
- Interactivity
Skeleton shimmer
Adjust one parameter for optional loading decoration; pause or use a static result.
Spring animation
Adjust one parameter for a damped physical response; pause or use a static result.
- Mobile behavior
Skeleton shimmer
Native touch controls; system motion reduction always wins.
Spring animation
Native touch controls; system motion reduction always wins.
Nine dimensions
- Trigger
Skeleton shimmer
Explicit activation to demonstrate optional loading decoration.
Spring animation
Explicit activation to demonstrate a damped physical response.
- Modality
Skeleton shimmer
Non-modal; surrounding content stays usable.
Spring animation
Non-modal; surrounding content stays usable.
- Placement
Skeleton shimmer
Inside a bounded specimen; no page-level decoration.
Spring animation
Inside a bounded specimen; no page-level decoration.
- Interactivity
Skeleton shimmer
Adjust one parameter for optional loading decoration; pause or use a static result.
Spring animation
Adjust one parameter for a damped physical response; pause or use a static result.
- Focus
Skeleton shimmer
Focus stays on the activated control. Reset restores focus to its button.
Spring animation
Focus stays on the activated control. Reset restores focus to its button.
- Dismissal
Skeleton shimmer
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
Spring animation
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
- Accessible role
Skeleton shimmer
button + select + checkbox + status
Spring animation
button + select + checkbox + status
- Use case
Skeleton shimmer
Demonstrate a loading placeholder with reserved space and persistent Loading text.
Spring animation
Explain settling after a drag or a spatial change when a physical response helps orientation.
- Mobile behavior
Skeleton shimmer
Native touch controls; system motion reduction always wins.
Spring animation
Native touch controls; system motion reduction always wins.
| Dimension | Skeleton shimmerSkeleton shimmer | Spring animationSpring animation |
|---|---|---|
| Trigger | Explicit activation to demonstrate optional loading decoration. | Explicit activation to demonstrate a damped physical response. |
| Modality | Non-modal; surrounding content stays usable. | Non-modal; surrounding content stays usable. |
| Placement | Inside a bounded specimen; no page-level decoration. | Inside a bounded specimen; no page-level decoration. |
| Interactivity | Adjust one parameter for optional loading decoration; pause or use a static result. | Adjust one parameter for a damped physical response; pause or use a static result. |
| Focus | Focus stays on the activated control. Reset restores focus to its button. | Focus stays on the activated control. Reset restores focus to its button. |
| Dismissal | Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners. | Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners. |
| Accessible role | button + select + checkbox + status | button + select + checkbox + status |
| Use case | Demonstrate a loading placeholder with reserved space and persistent Loading text. | Explain settling after a drag or a spatial change when a physical response helps orientation. |
| Mobile behavior | Native touch controls; system motion reduction always wins. | Native touch controls; system motion reduction always wins. |