Long Job ETA Ring
A long-running agent job: a progress ring creeps around with a glowing head and a live percent, the step name rolls from Cloning to Building the index, and About 4 min left counts down.
Also known as: long running task progress, time remaining progress ring, eta countdown loader.
Indexing acme/monorepo
Cloning 2.1 GBParsing 18,204 filesEmbedding 96k chunksBuilding the index
HTML
<div class="aia-long-job-eta-ring" role="status" aria-label="Indexing the repository, a few minutes left">
<span class="aia-long-job-eta-ring-dial" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none"><circle class="aia-long-job-eta-ring-track" cx="24" cy="24" r="20"/><circle class="aia-long-job-eta-ring-fill" cx="24" cy="24" r="20" pathLength="100"/></svg>
<i class="aia-long-job-eta-ring-head"></i>
<b class="aia-long-job-eta-ring-pct"></b>
</span>
<span class="aia-long-job-eta-ring-text">
<b>Indexing acme/monorepo</b>
<span class="aia-long-job-eta-ring-steps"><span class="aia-long-job-eta-ring-roll"><span>Cloning 2.1 GB</span><span>Parsing 18,204 files</span><span>Embedding 96k chunks</span><span>Building the index</span></span></span>
<span class="aia-long-job-eta-ring-eta"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg><span class="aia-long-job-eta-ring-min"></span></span>
</span>
</div>CSS
@property --aia-long-job-eta-ring-p {
syntax: "<number>";
inherits: true;
initial-value: 0.04;
}
@property --aia-long-job-eta-ring-pc {
syntax: "<integer>";
inherits: false;
initial-value: 4;
}
@property --aia-long-job-eta-ring-m {
syntax: "<integer>";
inherits: false;
initial-value: 4;
}
.aia-long-job-eta-ring {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
position: relative;
box-sizing: border-box;
padding: 0.9em 1em;
border-radius: 0.9em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
--d: 10s;
--p: var(--aia-long-job-eta-ring-p);
display: flex;
align-items: center;
gap: 1em;
width: 20em;
padding: 0.9em 1.1em 0.9em 0.95em;
animation: aia-long-job-eta-ring-progress var(--d) linear infinite;
}
.aia-long-job-eta-ring-dial {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 4.6em;
height: 4.6em;
}
.aia-long-job-eta-ring-dial svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.aia-long-job-eta-ring-track {
stroke: color-mix(in srgb, currentColor 10%, transparent);
stroke-width: 4;
}
.aia-long-job-eta-ring-fill {
stroke: var(--c);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--p) * 100);
transform: rotate(-90deg);
transform-origin: center;
transform-box: fill-box;
animation: aia-long-job-eta-ring-fade var(--d) linear infinite;
}
.aia-long-job-eta-ring-head {
position: absolute;
inset: 0;
transform: rotate(calc(var(--p) * 360deg));
animation: aia-long-job-eta-ring-fade var(--d) linear infinite;
}
.aia-long-job-eta-ring-head::before {
content: "";
position: absolute;
left: calc(50% - 0.26em);
top: calc(0.38em - 0.26em);
width: 0.52em;
height: 0.52em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0.1em var(--c), 0 0 0.7em 0.15em var(--c);
animation: aia-long-job-eta-ring-glow 1.6s ease-in-out infinite;
}
.aia-long-job-eta-ring-pct {
--aia-long-job-eta-ring-pc: calc(var(--p) * 100 - 0.49);
counter-reset: pc var(--aia-long-job-eta-ring-pc);
font-size: 0.95em;
font-variant-numeric: tabular-nums;
}
.aia-long-job-eta-ring-pct::before { content: counter(pc) "%"; }
.aia-long-job-eta-ring-text {
display: grid;
gap: 0.25em;
min-width: 0;
}
.aia-long-job-eta-ring-text > b {
font-size: 0.9em;
white-space: nowrap;
}
.aia-long-job-eta-ring-steps {
height: 1.4em;
overflow: hidden;
font-size: 0.8em;
}
.aia-long-job-eta-ring-roll {
display: grid;
animation: aia-long-job-eta-ring-roll var(--d) cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}
.aia-long-job-eta-ring-roll span {
height: 1.4em;
line-height: 1.4em;
color: color-mix(in srgb, currentColor 65%, transparent);
white-space: nowrap;
}
.aia-long-job-eta-ring-eta {
display: inline-flex;
align-items: center;
gap: 0.35em;
margin-top: 0.15em;
color: var(--c);
font-size: 0.74em;
font-weight: 600;
}
.aia-long-job-eta-ring-eta svg {
width: 1.15em;
height: 1.15em;
}
.aia-long-job-eta-ring-min {
counter-reset: m var(--aia-long-job-eta-ring-m);
animation: aia-long-job-eta-ring-eta var(--d) linear infinite;
}
.aia-long-job-eta-ring-min::before { content: "About " counter(m) " min left"; }
@keyframes aia-long-job-eta-ring-progress {
0% { --aia-long-job-eta-ring-p: 0.04; }
22% { --aia-long-job-eta-ring-p: 0.24; }
25% { --aia-long-job-eta-ring-p: 0.26; }
47% { --aia-long-job-eta-ring-p: 0.49; }
50% { --aia-long-job-eta-ring-p: 0.51; }
72% { --aia-long-job-eta-ring-p: 0.74; }
75% { --aia-long-job-eta-ring-p: 0.77; }
95% { --aia-long-job-eta-ring-p: 0.93; }
100% { --aia-long-job-eta-ring-p: 0.04; }
}
@keyframes aia-long-job-eta-ring-eta {
0%, 24.9% { --aia-long-job-eta-ring-m: 4; }
25%, 49.9% { --aia-long-job-eta-ring-m: 3; }
50%, 74.9% { --aia-long-job-eta-ring-m: 2; }
75%, 100% { --aia-long-job-eta-ring-m: 1; }
}
@keyframes aia-long-job-eta-ring-roll {
0%, 23% { transform: translateY(0); }
27%, 48% { transform: translateY(-1.4em); }
52%, 73% { transform: translateY(-2.8em); }
77%, 96% { transform: translateY(-4.2em); }
100% { transform: translateY(0); }
}
@keyframes aia-long-job-eta-ring-fade {
0%, 94% { opacity: 1; }
97%, 99% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes aia-long-job-eta-ring-glow {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
.aia-long-job-eta-ring,
.aia-long-job-eta-ring *,
.aia-long-job-eta-ring *::before {
animation-play-state: paused;
animation-delay: calc(var(--d) * -0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.aia-long-job-eta-ring, .aia-long-job-eta-ring *, .aia-long-job-eta-ring::before, .aia-long-job-eta-ring::after, .aia-long-job-eta-ring *::before, .aia-long-job-eta-ring *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-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.