Buffer Bar
Video-player progress bar with two filled regions: solid played + lighter buffered ahead. A subtle scrubber dot sits at the play head — premium pattern for media players, podcast UIs, and audio dashboards.
Buffer Bar the 12th of 12 designs in the 12 CSS Progress Bar Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div
class="pb-buf"
role="progressbar"
aria-valuenow="42"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Playback progress"
>
<div class="pb-buf-time">
<span>1:24</span>
<span class="pb-buf-total">4:18</span>
</div>
<div class="pb-buf-rail">
<span class="pb-buf-buffered" style="--pb-buf-buffered: 68%"></span>
<span class="pb-buf-played" style="--pb-buf-played: 42%"></span>
<span class="pb-buf-thumb" style="--pb-buf-played: 42%"></span>
</div>
<div class="pb-buf-meta">
<span class="pb-buf-title">Penthouse Tour · 4K</span>
<span class="pb-buf-quality">HD · 1080p</span>
</div>
</div> .pb-buf {
width: 280px;
display: grid;
gap: 8px;
font-family: system-ui, sans-serif;
}
.pb-buf-time {
display: flex;
justify-content: space-between;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: #f0eeff;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pb-buf-total {
color: #94a3b8;
}
.pb-buf-rail {
position: relative;
height: 5px;
background: rgba(255, 255, 255, 0.08);
border-radius: 99px;
}
.pb-buf-buffered {
position: absolute;
inset: 0;
width: var(--pb-buf-buffered, 0%);
background: rgba(255, 255, 255, 0.18);
border-radius: inherit;
transition: width 0.4s ease;
}
.pb-buf-played {
position: absolute;
inset: 0;
width: var(--pb-buf-played, 0%);
background: linear-gradient(90deg, #ef4444, #f97316);
border-radius: inherit;
transition: width 0.2s linear;
}
.pb-buf-thumb {
position: absolute;
top: 50%;
left: var(--pb-buf-played, 0%);
width: 12px;
height: 12px;
margin-left: -6px;
margin-top: -6px;
background: #fff;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(239, 68, 68, 0.4),
0 2px 8px rgba(0, 0, 0, 0.5);
transform: scale(0);
transition:
transform 0.2s ease,
left 0.2s linear;
}
.pb-buf-rail:hover .pb-buf-thumb,
.pb-buf:focus-within .pb-buf-thumb {
transform: scale(1);
}
.pb-buf-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.pb-buf-title {
font-size: 12px;
font-weight: 600;
color: #f0eeff;
}
.pb-buf-quality {
font-size: 10px;
color: #94a3b8;
font-weight: 600;
background: rgba(255, 255, 255, 0.06);
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 0.04em;
}