Skeleton Shimmer
Also called Skeleton wave, Shimmer effect, placeholder-wave
Gray placeholder shapes show a light highlight sweeping across them.
Use for
Content loading placeholders
Variants
- wave / shimmer
- text lines
- avatar + card
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Skeleton Shimmer" (also called a skeleton wave or shimmer effect) to [where].
A soft band of light should sweep across the gray placeholder shapes from left to right and pause briefly before the next pass: smooth and unhurried.
Match the placeholder shapes to the real layout so nothing jumps when the content loads, and show static placeholders to users who prefer reduced motion.Similar motions
Pulse Placeholder
Also called Skeleton pulse, placeholder-glow
Gray placeholder blocks fade in and out gently to signal loading.
Use for
Skeleton screens
Add a "Pulse Placeholder" (also called a skeleton pulse) to [where].
Gray placeholder blocks shaped like the coming content should slowly fade lighter and back together in a gentle, steady rhythm.
Match the placeholders to the real layout so nothing jumps when the content arrives, and keep them still for users who prefer reduced motion.A
Hover to play
Shine Sweep
Also called Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
A diagonal band of light sweeps across the element from one side to the other on hover.
Use for
Buttons, cards, badges
Add a "Shine Sweep" hover effect (also called sheen, shiny button, shine on hover, glint, shimmer or shimmer button) to [where].
A soft diagonal band of light should sweep across the element from left to right, repeating with a short pause while the pointer stays over it.
Keep the band clipped inside the element, stop it when the pointer leaves, and don't run it for users who prefer reduced motion.ABC DEFGH
Shimmer Text
Also called Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
A bright highlight sweeps repeatedly across the letters.
Use for
Badges, announcement pills
Add a "Shimmer Text" effect (also called animated shiny text or metallic shimmer text) to [where].
A band of light should sweep smoothly across the letters from left to right, then repeat after a short pause.
Keep the text readable under the highlight, and keep it still for users who prefer reduced motion.Indeterminate Linear Progress
Also called Indeterminate progress bar, Buffer bar
A bar segment sweeps repeatedly along a track when the duration is unknown.
Use for
Top-of-page or card loading
Add an "Indeterminate Linear Progress" bar (also called an indeterminate progress bar) to [where].
A short segment should sweep along the track from one end to the other again and again, quick and smooth, while the length of the task is unknown.
Let the segment enter and leave the track completely so the loop has no visible seam, and mark it as a busy progress bar for screen readers.More in Loading & Progress
Top Loading Bar
Also called Page progress bar, NProgress
A thin bar at the top of the page creeps forward during navigation and finishes on load.
Use for
SPA route loading
Add a "Top Loading Bar" (also called a page progress bar) to [where].
A thin bar along the top edge should dart forward at first and then creep more and more slowly while the page loads; when loading finishes it should race to the end and fade out.
Never let it reach the end before loading is actually done, and keep it from covering or shifting the page content.Typing Indicator
Also called Typing dots, Chat is typing
Three dots in a bubble pulse or rise in turn to show someone or an AI is composing.
Use for
Chat, AI assistants
Add a "Typing Indicator" (also called typing dots) to [where].
Dots inside a small chat bubble should rise and brighten one after another in a soft, gentle rhythm while the other side is composing.
Keep the loop seamless, remove the bubble as soon as the message arrives, and give screen readers a short status text instead of the dots.Bar Loader (Equalizer)
Also called Bars loader, Audio bars
Vertical bars grow and shrink out of phase, like an audio equalizer.
Use for
Loading or now-playing indicators
Add a "Bar Loader (Equalizer)" loading animation (also called a bars loader or audio bars) to [where].
A few vertical bars should stretch and shrink out of step with each other like an audio equalizer, at a lively but even pace.
Keep the loop seamless, give it a status label for screen readers, and stop the motion for users who prefer reduced motion.