Back to the library
Progress bar — buffered ahead
Variant: Buffered ahead
Two readings on one rail: playback, which is a clock, and the buffer, which is a network. The playhead runs linear because a clock does not ease, and both its legs run at the identical rate because a clock does not speed up afterwards to make back the time it lost; the buffer lands in 180ms ease-out bursts at irregular gaps. The piece is the margin between the two edges closing: the buffer drops out, playback reaches its edge, and the stall lands on the frame the gap hits zero — marked by the state word turning clay and three slow breaths on the knob, because a stopped playhead with no pulse reads as paused rather than starved.
progressdatastatusloop
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Progress bar — buffered ahead</title>
<style>
/* Two readings on one rail, each a registered number: where playback is
and where the buffer has reached. Everything drawn is a function of
one or the other, so the two edges can never disagree with the story. */
@property --_p {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --_b {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
--_muted: color-mix(in srgb, var(--slate) 52%, transparent);
--_track: color-mix(in srgb, var(--oat) 55%, transparent);
--_buffer: color-mix(in srgb, var(--clay) 30%, var(--_track));
/* Clock — 7.2s: the buffer runs ahead in bursts, drops out, playback
closes the gap and stalls, the network recovers, playback resumes
at the rate it left with. */
--cycle: 7.2s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.card {
width: min(300px, 82vw);
display: grid;
gap: 10px;
animation:
playhead var(--t) infinite,
buffer var(--t) infinite,
life var(--t) ease infinite;
}
/* Playback is a clock, so every moving segment is linear and both legs
run at the identical rate — a clock does not ease, and it does not
run faster afterwards to make up the time it lost. */
@keyframes playhead {
0%,
4% {
--_p: 0;
animation-timing-function: linear;
}
34%,
53% {
--_p: 47;
animation-timing-function: linear;
}
86.8%,
100% {
--_p: 100;
}
}
/* The network is not a clock: chunks land as 180ms ease-out bursts at
irregular gaps, with a long dropout after the second one. */
@keyframes buffer {
0%,
1.5% {
--_b: 0;
animation-timing-function: var(--ease-out);
}
4%,
9% {
--_b: 24;
animation-timing-function: var(--ease-out);
}
11.5%,
50% {
--_b: 47;
animation-timing-function: var(--ease-out);
}
52.5%,
58% {
--_b: 78;
animation-timing-function: var(--ease-out);
}
60.5%,
100% {
--_b: 100;
}
}
@keyframes life {
0%,
0.8% {
opacity: 0;
animation-timing-function: var(--ease-out);
}
3%,
88% {
opacity: 1;
}
92%,
94.5% {
opacity: 0.6;
}
97%,
100% {
opacity: 0;
}
}
.row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.lbl {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
}
.state {
display: grid;
font-size: 11px;
font-weight: 600;
text-align: right;
}
.state span {
grid-area: 1 / 1;
}
.playing {
color: var(--_muted);
animation: playing var(--t) ease infinite;
}
/* The stall is the one event in the piece, and the word turns clay for
exactly as long as the margin is gone. */
@keyframes playing {
0%,
34.5% {
opacity: 1;
}
36%,
51.5% {
opacity: 0;
}
53%,
100% {
opacity: 1;
}
}
.buffering {
color: var(--clay-d);
animation: buffering var(--t) ease infinite;
}
@keyframes buffering {
0%,
34.5% {
opacity: 0;
}
36%,
51.5% {
opacity: 1;
}
53%,
100% {
opacity: 0;
}
}
.stack {
position: relative;
}
.rail {
position: relative;
height: 6px;
border-radius: 999px;
background: var(--_track);
overflow: hidden;
}
.buf,
.play {
position: absolute;
inset: 0;
border-radius: 999px;
}
.buf {
background: var(--_buffer);
transform: translateX(calc((var(--_b) - 100) * 1%));
}
.play {
background: var(--clay);
transform: translateX(calc((var(--_p) - 100) * 1%));
}
/* The knob rides a full-width layer translated by the same number as
the played fill, so the two cannot land a frame apart. It sits
outside the rail's clip because at zero it would be sliced in half. */
.head {
position: absolute;
inset: 0;
transform: translateX(calc((var(--_p) - 100) * 1%));
}
.knob {
position: absolute;
top: 50%;
right: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--clay);
border: 2px solid var(--paper);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--slate) 10%, transparent);
transform: translate(50%, -50%);
animation: wait var(--t) ease-in-out infinite;
}
/* Three slow breaths while playback is held — the only motion in the
piece that is not one of the two numbers, and it exists because a
stopped playhead with no pulse reads as paused, not starved. */
@keyframes wait {
0%,
34% {
opacity: 1;
}
37% {
opacity: 0.5;
}
40% {
opacity: 1;
}
43% {
opacity: 0.5;
}
46% {
opacity: 1;
}
49% {
opacity: 0.5;
}
52%,
100% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
/* The two readings still advance — they are values, not decoration —
but in steps on a stretched clock, and the knob stops blinking:
the state word alone carries the stall. */
.card {
animation-name: playhead-rm, buffer-rm, life;
animation-duration: calc(var(--t) * 1.6), calc(var(--t) * 1.6), calc(var(--t) * 1.6);
animation-timing-function: steps(4), steps(1, end), ease;
}
.knob {
animation: none;
}
.playing,
.buffering {
animation-duration: calc(var(--t) * 1.6);
}
@keyframes playhead-rm {
0%,
4% {
--_p: 0;
}
34%,
53% {
--_p: 47;
animation-timing-function: steps(5);
}
86.8%,
100% {
--_p: 100;
}
}
@keyframes buffer-rm {
0%,
3.9% {
--_b: 0;
}
4%,
11.4% {
--_b: 24;
}
11.5%,
52.4% {
--_b: 47;
}
52.5%,
60.4% {
--_b: 78;
}
60.5%,
100% {
--_b: 100;
}
}
}
</style>
</head>
<body>
<div
class="card"
role="img"
aria-label="A playback progress bar with a buffer running ahead of the playhead: the buffer stalls, playback catches up to its edge and halts, then both recover"
>
<div class="row">
<span class="lbl">Episode 41</span>
<span class="state">
<span class="playing">Playing</span>
<span class="buffering">Buffering</span>
</span>
</div>
<div class="stack">
<div class="rail">
<div class="buf"></div>
<div class="play"></div>
</div>
<div class="head">
<span class="knob"></span>
</div>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.