Pull to Refresh

An element follows the pointer when dragged and can be limited to an area or an axis.

Add a "Drag" interaction (also called draggable or drag constraints) to [where].
The element should follow the pointer directly while dragged, stop at the edges of its allowed area, and spring back to its resting place with a small bounce when released.
Make it work with touch as well as a mouse without the page scrolling underneath, and offer a keyboard way to move it.

A ring or arc rotates continuously to show that something is loading.

Add a "Circular Spinner" (also called a spinner or throbber) to [where].
An arc should rotate steadily around a faint ring while it stretches longer and shorter, smooth and continuous.
Keep the rotation seamless, give it a loading label for screen readers, and slow or stop it for users who prefer reduced motion.

A panel slides up from the bottom edge, often draggable and snapping to heights.

Add a "Bottom Sheet Slide-Up" (also called a bottom drawer or sheet) to [where].
The panel should slide up from the bottom edge while the page behind it dims, decelerating smoothly into place without a bounce.
Play it once each time the sheet opens, slide it back down on close, and keep keyboard focus inside the sheet while it is open.

A circular wave expands and fades from the exact point of the click or tap.

Add a "Ripple" effect (also called a material ripple or ink ripple) to [where].
On each click or tap, a soft circular wave should spread out from the exact point that was pressed until it covers the element, fading as it grows: quick and light.
Clip the wave to the element's shape, let rapid presses each start their own ripple, and start it from the center for keyboard presses.

A circle and tick draw themselves to confirm an action succeeded.

Add a "Success Checkmark" animation (also called an animated success tick) to [where].
A circle should draw itself around in one smooth stroke, then the tick draws inside it and the whole mark gives a small, gentle pop: calm and confident.
Play it once when the action succeeds, pair it with a text message screen readers can announce, and show the finished mark right away for users who prefer reduced motion.

Swiping a list row sideways reveals action buttons such as delete or archive.

Add a "Swipe to Delete" interaction (also called swipe actions or swipe to reveal) to [where].
Dragging a row sideways should slide it directly with the finger to uncover action buttons such as archive and delete behind it, stopping once they are fully shown, and on release it glides smoothly into place without bounce.
Keep vertical scrolling working while swiping horizontally, and make the same actions reachable by keyboard and screen readers without swiping.