6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven pulses that each mean something: a heartbeat with a real double thump, a LIVE badge, placeholder lines that pulse while loading, a breathing exercise circle, a story ring around an avatar, a record button with a timer and a recommended plan whose border glow swells.
A heart that beats with the double thump of a real heartbeat: two quick scale-ups close together, then a rest. The rhythm comes from keyframe percentages rather than easing, which is how you get an uneven beat from a single loop.
View code
<p class="pl1"><span class="h" aria-hidden="true">♥</span> Made with care in Leeds</p>
A LIVE label whose red dot fades softly in and out, the convention for streams and live events. The pulse is opacity only, which is the gentlest kind of motion, and the word LIVE carries the meaning on its own.
Grey placeholder bars that pulse between two shades while content loads, a calmer alternative to a shimmer sweep. The block has aria-busy and a hidden Loading message, and each bar has a slightly different width so it looks like text.
A circle that grows for four seconds and shrinks for four, with the words Breathe in and Breathe out cross-fading in time. Both labels use the same eight-second clock, so they stay in sync. The instruction is also written below for anyone with motion turned off.
View code
<div class="pl4"><div class="c" aria-hidden="true"><span class="in">Breathe in</span><span class="out">Breathe out</span></div><p>Breathe in for four seconds, then out for four.</p></div>
A story-style ring around an avatar pulses to show new activity, built from a conic-gradient ring and a slow scale pulse. The ring sits on the link, whose name says Ana has a new story, so the meaning is in words as well as colour.
View code
<a class="pl5" href="#story-ana" aria-label="Ana has a new story"><span class="ring" aria-hidden="true"></span><span class="av" aria-hidden="true">AN</span></a>
A record toggle whose red dot pulses while recording and a timer counts the seconds. The button has aria-pressed, its label switches between Start and Stop recording, and the timer is a role="timer" element.
var b = document.querySelector('.pl6 button'), l = b.querySelector('.l'), t = document.querySelector('.pl6 .t'), s = 0, id;
b.onclick = function () {
var on = b.getAttribute('aria-pressed') !== 'true'; b.setAttribute('aria-pressed', on); l.textContent = on ? 'Stop recording' : 'Start recording';
if (on) { s = 0; t.textContent = '00:00'; id = setInterval(function () { s++; t.textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0'); }, 1000); } else clearInterval(id);
};
07. Pulsing Border Glow
PulseCard
The recommended plan's border glow gently swells and fades to mark it as the one to choose. The pulse animates a box-shadow on a pseudo-element's opacity, which is cheaper than animating the shadow itself on every frame.
View code
<article class="pl7"><p class="k">Recommended</p><h3>Studio</h3><p>For teams of up to 10.</p></article>
Pulses work for live status, recording, loading and new activity. They lose meaning when everything pulses, so keep it to one or two elements on a screen.
Rhythm from keyframe percentages
An uneven rhythm, like a heartbeat, comes from where you place keyframes in the loop, not from easing. Two quick peaks at 10 and 30 percent and a long rest until 100 percent give the double thump.
Animate cheap properties
Scale and opacity pulses are smooth everywhere. For a glow, put a fixed box-shadow on a pseudo-element and pulse its opacity, instead of animating the shadow itself.
Words carry the meaning
Pair every pulse with text: LIVE, Recording, Loading comments. Under prefers-reduced-motion the pulses stop and the words remain.
Frequently asked questions
How fast should a pulse be?
About one to two seconds per cycle. Faster feels urgent or alarming; slower feels calm.
Can I sync a label with a pulse?
Yes. Give both the same duration, as the breathing circle does with its two labels.
Do pulses use much battery?
Small transform and opacity pulses are cheap. Stop pulses that are off screen in long pages.