Braille Dots Spinner
The braille dot spinner from command line tools: ten frames of dots chasing around a tiny grid, next to a muted label. The frames are real characters, so it inherits your font size.
Also known as: cli dots spinner, terminal braille loader, braille loading animation.
Thinking
HTML
<div class="ldr-braille-spinner" role="status" aria-label="Thinking"> <span aria-hidden="true"></span> Thinking </div>
CSS
.ldr-braille-spinner {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
display: inline-flex;
align-items: center;
gap: 0.2em;
font: 500 calc(var(--s) / 2.6) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: pre;
color: color-mix(in srgb, currentColor 60%, transparent);
}
.ldr-braille-spinner span {
font-size: 1.5em;
color: var(--c);
}
.ldr-braille-spinner span::before {
content: "⠋";
animation: ldr-braille-spinner-frames 0.8s steps(1, end) infinite;
}
@keyframes ldr-braille-spinner-frames {
0% { content: "⠋"; }
10% { content: "⠙"; }
20% { content: "⠹"; }
30% { content: "⠸"; }
40% { content: "⠼"; }
50% { content: "⠴"; }
60% { content: "⠦"; }
70% { content: "⠧"; }
80% { content: "⠇"; }
90% { content: "⠏"; }
100% { content: "⠋"; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-braille-spinner, .ldr-braille-spinner *, .ldr-braille-spinner::before, .ldr-braille-spinner::after, .ldr-braille-spinner *::before, .ldr-braille-spinner *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.