Upload Progress Border
The border fills clockwise from the top in bursts while the percentage counts up, glows at 100 and resets. The stroke and a registered @property integer share keyframes, so they never drift.
Also known as: border loading animation, progress border css, card border progress bar, upload progress animation css.
Uploading brand-kit.zip
HTML
<div class="bdr-upload-progress-border">
<svg class="bdr-upload-progress-border-svg" viewBox="0 0 150 85" preserveAspectRatio="none" aria-hidden="true">
<path class="bdr-upload-progress-border-track" d="M75 0H140A10 10 0 0 1 150 10V75A10 10 0 0 1 140 85H10A10 10 0 0 1 0 75V10A10 10 0 0 1 10 0Z"/>
<path class="bdr-upload-progress-border-bar" d="M75 0H140A10 10 0 0 1 150 10V75A10 10 0 0 1 140 85H10A10 10 0 0 1 0 75V10A10 10 0 0 1 10 0Z" pathLength="100"/>
</svg>
<span class="bdr-upload-progress-border-num"></span>
<span class="bdr-upload-progress-border-file">Uploading brand-kit.zip</span>
</div>CSS
@property --bdr-upload-progress-border-p {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.bdr-upload-progress-border {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 15em;
height: 8.5em;
border-radius: 1em;
font-family: system-ui, sans-serif;
font-weight: 600;
--t: 5s;
--ease: cubic-bezier(0.3, 0.7, 0.3, 1);
place-content: center;
gap: 0.2em;
background: color-mix(in srgb, var(--c) 5%, transparent);
}
.bdr-upload-progress-border-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.bdr-upload-progress-border-svg path {
fill: none;
stroke-width: 1.6;
}
.bdr-upload-progress-border-track { stroke: color-mix(in srgb, var(--c) 16%, transparent); }
.bdr-upload-progress-border-bar {
stroke: var(--c);
stroke-linecap: round;
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
animation: bdr-upload-progress-border-fill var(--t) var(--ease) infinite, bdr-upload-progress-border-done var(--t) ease-out infinite;
}
.bdr-upload-progress-border-num {
justify-self: center;
counter-reset: bdr-upload-progress-border-p var(--bdr-upload-progress-border-p);
font-size: 1.9em;
font-weight: 700;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
animation: bdr-upload-progress-border-count var(--t) var(--ease) infinite;
}
.bdr-upload-progress-border-num::before { content: counter(bdr-upload-progress-border-p) "%"; }
.bdr-upload-progress-border-file {
font-size: 0.72em;
font-weight: 500;
opacity: 0.6;
}
@keyframes bdr-upload-progress-border-fill {
0%, 4% { stroke-dashoffset: 100; }
18% { stroke-dashoffset: 88; }
34% { stroke-dashoffset: 61; }
48% { stroke-dashoffset: 47; }
64% { stroke-dashoffset: 22; }
76%, 100% { stroke-dashoffset: 0; }
}
@keyframes bdr-upload-progress-border-count {
0%, 4% { --bdr-upload-progress-border-p: 0; }
18% { --bdr-upload-progress-border-p: 12; }
34% { --bdr-upload-progress-border-p: 39; }
48% { --bdr-upload-progress-border-p: 53; }
64% { --bdr-upload-progress-border-p: 78; }
76%, 100% { --bdr-upload-progress-border-p: 100; }
}
@keyframes bdr-upload-progress-border-done {
0%, 76% { filter: none; opacity: 1; }
80% { filter: drop-shadow(0 0 0.35em var(--c)); opacity: 1; }
92% { filter: none; opacity: 1; }
98%, 100% { filter: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-upload-progress-border-bar,
.bdr-upload-progress-border-num { animation: none; }
.bdr-upload-progress-border-bar { stroke-dashoffset: 36; }
.bdr-upload-progress-border-num { --bdr-upload-progress-border-p: 64; }
}
@media (prefers-reduced-motion: reduce) {
.bdr-upload-progress-border, .bdr-upload-progress-border *, .bdr-upload-progress-border::before, .bdr-upload-progress-border::after, .bdr-upload-progress-border *::before, .bdr-upload-progress-border *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.