Behavior comparison
Skeleton shimmer addresses optional loading decoration; Spring animation addresses a damped physical response. They can be combined when both needs apply.
Decision
Does motion explain a change, report state, or only decorate?
| 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. |
Audience measurement
With your consent, Google Analytics and aggregate first-party counters measure site usage to help us improve it. These counters contain no search text, candidate, session identifier, or event identifier. You can change your choice anytime via “Cookies” in the footer.