Pulse Animation
A rhythmic scale or opacity oscillation that signals a live state, loading placeholder, or draws attention to a UI element.
Plain English
Pulse serves three roles in UI. First, it signals live data — a green dot pulsing on a user's avatar says "this person is online right now." Second, it stands in for loading content — a pulsing grey bar breathing in and out means "content coming soon." Third, it draws attention to something new — a badge pulsing on a notification icon says "look here before you continue." Each use has different timing: live indicators pulse slowly (2–3s), loading placeholders slightly faster (1.5–2s), attention pulses are more urgent (1s).
Technical
Opacity pulse: animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }. Scale ping (for live indicators): @keyframes ping { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2); opacity: 0; } } — pair with a solid dot on top. Tailwind: animate-pulse, animate-ping. Use will-change: opacity or transform to keep on compositor thread.
Live Demo
Pulse animation use cases
Live status
animate-ping
Placeholder
animate-pulse
Badge
ping on badge
Ping draws attention to live states; pulse signals loading — choose based on what you're communicating.
Usage
✓ Good usage
A green pulsing ring behind a solid green dot on an avatar thumbnail, instantly communicating the person is currently active.
✗ Bad usage
A pulsing badge on a menu item to indicate a new feature — if the pulse never stops, users learn to ignore it.
Recommended values
- Loading pulse: 1.5–2s cubic-bezier(0.4, 0, 0.6, 1)
- Live indicator: 2–3s ease-in-out
- Attention ping: 1s with solid dot underneath
- Color: green for live, grey for loading, brand color for attention
- Scale range for ping: 1× to 1.75×
- Respect prefers-reduced-motion: reduce to simple opacity fade
Common mistakes
- Pulse that never stops — continuous pulsing on non-live content becomes visual noise that users tune out.
- Too fast — a 0.5s pulse on a loading placeholder feels frantic rather than calm.
- Missing prefers-reduced-motion check — users with vestibular disorders need the animation disabled.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add pulse animations to indicate live states. Use a ping animation (scale 1 to 1.75, opacity to 0) on a ring behind status dots to signal online users. Use opacity pulse (0.5 to 1, 2s cycle) on skeleton placeholders during loading. Always check prefers-reduced-motion and replace with a static state if reduced.