Tokens per Second Gauge
A live streaming speed gauge reading 84 tok/s: the needle and the number wander between 76 and 93 the way real throughput does, while the output token count climbs underneath. All @property driven.
Also known as: tokens per second meter, llm speed gauge, throughput speedometer.
Streaming
claude-sonnet-5.5HTML
<div class="aia-tokens-per-second-meter" role="status" aria-label="Streaming at about 84 tokens per second">
<div class="aia-tokens-per-second-meter-head"><span class="aia-tokens-per-second-meter-live" aria-hidden="true"></span><b>Streaming</b><code>claude-sonnet-5.5</code></div>
<div class="aia-tokens-per-second-meter-dial" aria-hidden="true">
<svg viewBox="0 0 100 56" fill="none" stroke-linecap="round">
<path class="aia-tokens-per-second-meter-ticks" d="M14 50a36 36 0 0 1 72 0" pathLength="100"/>
<path class="aia-tokens-per-second-meter-track" d="M6 50a44 44 0 0 1 88 0" pathLength="100"/>
<path class="aia-tokens-per-second-meter-arc" d="M6 50a44 44 0 0 1 88 0" pathLength="100"/>
<path class="aia-tokens-per-second-meter-needle" d="M50 50V18"/>
<circle class="aia-tokens-per-second-meter-hub" cx="50" cy="50" r="3.2"/>
</svg>
<span class="aia-tokens-per-second-meter-num"></span>
</div>
<div class="aia-tokens-per-second-meter-foot" aria-hidden="true"><span class="aia-tokens-per-second-meter-out"></span><span>First token 310 ms</span></div>
</div>CSS
@property --aia-tokens-per-second-meter-v {
syntax: "<number>";
inherits: true;
initial-value: 82;
}
@property --aia-tokens-per-second-meter-n {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
@property --aia-tokens-per-second-meter-o {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.aia-tokens-per-second-meter {
--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);
--v: var(--aia-tokens-per-second-meter-v);
width: 16em;
padding: 0.75em 0.95em 0.7em;
animation: aia-tokens-per-second-meter-jitter 4.2s ease-in-out infinite;
}
.aia-tokens-per-second-meter-head {
display: flex;
align-items: center;
gap: 0.45em;
font-size: 0.78em;
}
.aia-tokens-per-second-meter-head code {
margin-left: auto;
color: color-mix(in srgb, currentColor 50%, transparent);
font: 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-tokens-per-second-meter-live {
position: relative;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--c);
}
.aia-tokens-per-second-meter-live::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--c);
animation: aia-tokens-per-second-meter-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.aia-tokens-per-second-meter-dial {
position: relative;
margin: 0.55em auto 0;
width: 11em;
}
.aia-tokens-per-second-meter-dial svg {
display: block;
width: 100%;
overflow: visible;
}
.aia-tokens-per-second-meter-ticks {
stroke: color-mix(in srgb, currentColor 28%, transparent);
stroke-width: 1.4;
stroke-dasharray: 0 10;
}
.aia-tokens-per-second-meter-track {
stroke: color-mix(in srgb, currentColor 10%, transparent);
stroke-width: 5;
}
.aia-tokens-per-second-meter-arc {
stroke: var(--c);
stroke-width: 5;
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--v) / 1.5);
}
.aia-tokens-per-second-meter-needle {
stroke: currentColor;
stroke-width: 2.4;
transform-box: view-box;
transform-origin: 50% 89.29%;
transform: rotate(calc(var(--v) / 150 * 180deg - 90deg));
}
.aia-tokens-per-second-meter-hub {
fill: currentColor;
}
.aia-tokens-per-second-meter-num {
display: block;
margin-top: 0.15em;
text-align: center;
font: 650 1.35em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
--aia-tokens-per-second-meter-n: calc(var(--v));
counter-reset: n var(--aia-tokens-per-second-meter-n);
}
.aia-tokens-per-second-meter-num::before { content: counter(n); }
.aia-tokens-per-second-meter-num::after {
content: " tok/s";
color: color-mix(in srgb, currentColor 50%, transparent);
font-size: 0.5em;
font-weight: 500;
}
.aia-tokens-per-second-meter-foot {
display: flex;
justify-content: space-between;
margin-top: 0.35em;
color: color-mix(in srgb, currentColor 52%, transparent);
font-size: 0.7em;
}
.aia-tokens-per-second-meter-out {
font-variant-numeric: tabular-nums;
counter-reset: o var(--aia-tokens-per-second-meter-o);
animation: aia-tokens-per-second-meter-out 8.4s linear infinite;
}
.aia-tokens-per-second-meter-out::before { content: counter(o) " tokens out"; }
@keyframes aia-tokens-per-second-meter-jitter {
0% { --aia-tokens-per-second-meter-v: 82; }
7% { --aia-tokens-per-second-meter-v: 88; }
13% { --aia-tokens-per-second-meter-v: 79; }
21% { --aia-tokens-per-second-meter-v: 91; }
28% { --aia-tokens-per-second-meter-v: 85; }
36% { --aia-tokens-per-second-meter-v: 87; }
43% { --aia-tokens-per-second-meter-v: 76; }
51% { --aia-tokens-per-second-meter-v: 84; }
59% { --aia-tokens-per-second-meter-v: 93; }
66% { --aia-tokens-per-second-meter-v: 86; }
73% { --aia-tokens-per-second-meter-v: 80; }
81% { --aia-tokens-per-second-meter-v: 89; }
89% { --aia-tokens-per-second-meter-v: 83; }
100% { --aia-tokens-per-second-meter-v: 82; }
}
@keyframes aia-tokens-per-second-meter-out {
from { --aia-tokens-per-second-meter-o: 0; }
to { --aia-tokens-per-second-meter-o: 706; }
}
@keyframes aia-tokens-per-second-meter-ping {
0% { opacity: 0.6; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
.aia-tokens-per-second-meter {
animation: none;
--aia-tokens-per-second-meter-v: 84;
}
.aia-tokens-per-second-meter-out {
animation-play-state: paused;
animation-delay: -4s;
}
.aia-tokens-per-second-meter-live::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-tokens-per-second-meter, .aia-tokens-per-second-meter *, .aia-tokens-per-second-meter::before, .aia-tokens-per-second-meter::after, .aia-tokens-per-second-meter *::before, .aia-tokens-per-second-meter *::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.