Test Runner Dots
A dot reporter for vitest run: 129 dots fill in green in bursts as files finish, one turns amber for a skipped test, then the footer flips to 128 passed. One registered integer drives every row.
Also known as: test progress animation, vitest dot reporter, unit tests running ui.
vitest run
tests/auth/session.test.ts 128 passed1 skipped4.21s
HTML
<div class="aia-test-runner-dots" role="status" aria-label="Running 129 tests">
<div class="aia-test-runner-dots-head">
<code><span aria-hidden="true">$</span> vitest run</code>
<span class="aia-test-runner-dots-num" aria-hidden="true"></span>
</div>
<div class="aia-test-runner-dots-grid" aria-hidden="true">
<i></i><i></i><i></i><i></i><i class="aia-test-runner-dots-last"></i>
<b class="aia-test-runner-dots-skip"></b>
</div>
<p class="aia-test-runner-dots-foot">
<span class="aia-test-runner-dots-run">tests/auth/session.test.ts</span>
<span class="aia-test-runner-dots-sum"><b>128 passed</b><em>1 skipped</em><span>4.21s</span></span>
</p>
</div>CSS
@property --aia-test-runner-dots-n {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
.aia-test-runner-dots {
--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: 7.5s;
--n: var(--aia-test-runner-dots-n);
--ok: color-mix(in srgb, #16a34a 78%, currentColor);
--skip: color-mix(in srgb, #d97706 84%, currentColor);
--p: 0.8em;
--done: clamp(0, (var(--n) - 128) * 1, 1);
width: 23.3em;
padding: 0.75em 1.05em 0.7em;
animation: aia-test-runner-dots-count var(--d) cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.aia-test-runner-dots-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.6em;
font-size: 0.8em;
}
.aia-test-runner-dots-head code {
font: 600 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-test-runner-dots-head code span { color: color-mix(in srgb, var(--c) 75%, currentColor); }
.aia-test-runner-dots-num {
color: color-mix(in srgb, currentColor 50%, transparent);
font: 500 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
counter-reset: n var(--n);
}
.aia-test-runner-dots-num::before { content: counter(n) " / 129"; }
.aia-test-runner-dots-grid {
position: relative;
display: grid;
gap: 0;
animation: aia-test-runner-dots-fade var(--d) linear infinite;
}
/* each row: 26 pending dots, with the passed ones painted over the top */
.aia-test-runner-dots-grid i {
--r: 0;
position: relative;
width: calc(var(--p) * 26);
height: var(--p);
background: radial-gradient(circle, color-mix(in srgb, currentColor 16%, transparent) 0.17em, transparent 0.2em) 0 0 / var(--p) var(--p) repeat-x;
}
.aia-test-runner-dots-grid i:nth-child(2) { --r: 1; }
.aia-test-runner-dots-grid i:nth-child(3) { --r: 2; }
.aia-test-runner-dots-grid i:nth-child(4) { --r: 3; }
.aia-test-runner-dots-grid i:nth-child(5) { --r: 4; }
.aia-test-runner-dots-grid .aia-test-runner-dots-last { width: calc(var(--p) * 25); }
.aia-test-runner-dots-grid i::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: calc(clamp(0, var(--n) - var(--r) * 26, 26) * var(--p));
background: radial-gradient(circle, var(--ok) 0.23em, transparent 0.26em) 0 0 / var(--p) var(--p) repeat-x;
}
/* the one skipped test: row 3, dot 20 (test 72) */
.aia-test-runner-dots-skip {
position: absolute;
left: calc(var(--p) * 19);
top: calc(var(--p) * 2);
width: var(--p);
height: var(--p);
background: radial-gradient(circle, var(--skip) 0.25em, transparent 0.28em);
opacity: clamp(0, var(--n) - 71, 1);
transform: scale(calc(0.4 + clamp(0, var(--n) - 71, 1) * 0.6));
}
.aia-test-runner-dots-skip::after {
content: "";
position: absolute;
inset: 0.08em;
border-radius: 50%;
box-shadow: 0 0 0 0.09em color-mix(in srgb, #d97706 45%, transparent);
}
.aia-test-runner-dots-foot {
display: grid;
margin: 0.6em 0 0;
font: 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
animation: aia-test-runner-dots-fade var(--d) linear infinite;
}
.aia-test-runner-dots-foot > * {
grid-area: 1 / 1;
white-space: nowrap;
}
.aia-test-runner-dots-run {
color: color-mix(in srgb, currentColor 50%, transparent);
opacity: calc(1 - var(--done));
}
.aia-test-runner-dots-run::before {
content: "RUN ";
color: color-mix(in srgb, var(--c) 75%, currentColor);
font-weight: 700;
}
.aia-test-runner-dots-sum {
display: flex;
gap: 1em;
opacity: var(--done);
transform: translateY(calc((1 - var(--done)) * 0.5em));
}
.aia-test-runner-dots-sum b {
color: var(--ok);
font-weight: 700;
}
.aia-test-runner-dots-sum b::before { content: "\2713 "; }
.aia-test-runner-dots-sum em {
color: var(--skip);
font-style: normal;
font-weight: 600;
}
.aia-test-runner-dots-sum span {
margin-left: auto;
color: color-mix(in srgb, currentColor 50%, transparent);
}
@keyframes aia-test-runner-dots-count {
0%, 6% { --aia-test-runner-dots-n: 0; }
18% { --aia-test-runner-dots-n: 31; }
23% { --aia-test-runner-dots-n: 38; }
37% { --aia-test-runner-dots-n: 77; }
43% { --aia-test-runner-dots-n: 84; }
58% { --aia-test-runner-dots-n: 117; }
63% { --aia-test-runner-dots-n: 121; }
70%, 97% { --aia-test-runner-dots-n: 129; }
97.5%, 100% { --aia-test-runner-dots-n: 0; }
}
@keyframes aia-test-runner-dots-fade {
0%, 92% { opacity: 1; }
95.5%, 97.5% { opacity: 0; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aia-test-runner-dots,
.aia-test-runner-dots-grid,
.aia-test-runner-dots-foot {
animation: none;
--aia-test-runner-dots-n: 129;
}
}
@media (prefers-reduced-motion: reduce) {
.aia-test-runner-dots, .aia-test-runner-dots *, .aia-test-runner-dots::before, .aia-test-runner-dots::after, .aia-test-runner-dots *::before, .aia-test-runner-dots *::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.