Upload Progress
A static 73% could be a live transfer or stalled. The shimmer moving through the bar means bytes are flowing; when it becomes a slow pulse, the transfer has stalled; when it stops, it's done. Three states, one animation property.
Upload Progress the 1st of 30 designs in the 30 CSS Badges collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). 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="upload-stage">
<div class="upload-badge" id="upload-badge" style="--upload-ext-color:#6b3aa0">
<div class="upload-top">
<div class="upload-ext">ZIP</div>
<div class="upload-file-info">
<div class="upload-filename">design-assets-v4.zip</div>
<div class="upload-filesize">340 MB · 1,284 files</div>
</div>
<svg class="upload-status-icon" viewBox="0 0 28 28" aria-hidden="true">
<circle class="upload-check-circle" cx="14" cy="14" r="13" fill="none" stroke="#e8e4da" stroke-width="2"/>
<path class="upload-check-path" d="M 7 14 L 11.5 18.5 L 21 9" fill="none" stroke="#aaa" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="upload-bar-wrap">
<div class="upload-bar-fill" id="upload-fill" style="--upload-color:#6b3aa0"></div>
</div>
<div class="upload-bottom">
<div class="upload-pct" id="upload-pct">0%</div>
<div class="upload-speed-eta" id="upload-meta">Waiting…</div>
</div>
</div>
</div> .upload-stage {
background: #f2f4f7;
padding: 48px 40px;
display: flex;
flex-direction: column;
gap: 14px;
justify-content: center;
align-items: flex-start;
min-height: 280px;
}
.upload-badge {
width: 100%;
max-width: 420px;
background: #fff;
border: 1px solid #dde3ec;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.upload-top {
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.upload-ext {
width: 40px;
height: 40px;
border-radius: 5px;
background: var(--upload-ext-color, #555);
display: flex;
align-items: center;
justify-content: center;
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 9px;
font-weight: 700;
color: #fff;
letter-spacing: 0.08em;
flex-shrink: 0;
}
.upload-file-info {
flex: 1;
min-width: 0;
}
.upload-filename {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 13px;
font-weight: 600;
color: #1a1612;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
margin-bottom: 3px;
}
.upload-filesize {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #888;
}
.upload-status-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.upload-check-circle { transition: stroke 0.4s; }
.upload-check-path {
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, stroke 0.3s;
}
.upload-badge.is-complete .upload-check-circle { stroke: #0cce6b; }
.upload-badge.is-complete .upload-check-path { stroke: #0cce6b; stroke-dashoffset: 0; }
.upload-bar-wrap {
height: 4px;
background: #f0eee8;
position: relative;
}
.upload-bar-fill {
height: 100%;
background: var(--upload-color, #4285f4);
width: 0%;
transition: width 0.5s linear, background 0.5s ease;
position: relative;
overflow: hidden;
}
.upload-bar-fill::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
animation: upload-shimmer 1.2s ease-in-out infinite;
}
@keyframes upload-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.upload-badge.is-complete .upload-bar-fill::after { animation: none; }
.upload-badge.is-stalled .upload-bar-fill::after { animation: upload-stall 1.5s ease-in-out infinite; }
@keyframes upload-stall {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
.upload-bar-fill::after { animation: none; }
}
.upload-bottom {
padding: 8px 16px 12px;
display: flex;
justify-content: space-between;
}
.upload-pct {
font-family: ui-monospace, "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
color: #1a1612;
}
.upload-speed-eta {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #888;
text-align: right;
} // Simulate an upload — progresses, stalls briefly at ~42% to show the
// stall state, resumes, completes. Then idle. Click to restart not
// included; in real use the lifecycle is driven by actual XHR events.
(function () {
var badge = document.getElementById('upload-badge');
var fill = document.getElementById('upload-fill');
var pctEl = document.getElementById('upload-pct');
var metaEl = document.getElementById('upload-meta');
var pct = 0;
var stalled = false;
function update() {
fill.style.width = pct + '%';
pctEl.textContent = Math.floor(pct) + '%';
if (pct >= 100) {
badge.classList.remove('is-stalled');
badge.classList.add('is-complete');
fill.style.background = '#0cce6b';
pctEl.textContent = '100%';
metaEl.textContent = 'Complete';
return;
}
if (stalled) {
badge.classList.add('is-stalled');
metaEl.textContent = 'Connection interrupted…';
} else {
badge.classList.remove('is-stalled');
var speed = (2.4 + Math.random() * 0.8).toFixed(1);
var remaining = ((340 - 340 * pct / 100) / parseFloat(speed)).toFixed(0);
metaEl.textContent = speed + ' MB/s · ' + remaining + 's left';
}
}
var ticker = setInterval(function () {
if (pct >= 100) { clearInterval(ticker); return; }
if (pct >= 42 && pct < 48 && !stalled) {
stalled = true;
update();
return;
}
if (stalled && pct < 48) {
setTimeout(function () { stalled = false; }, 3000);
return;
}
pct = Math.min(100, pct + 1.8 + Math.random() * 0.6);
update();
}, 400);
update();
})();