Blinking Cursor
A block cursor blinking after a word, the terminal-style 'waiting for output' signal that streaming AI interfaces have adopted. Uses steps() so the blink is crisp, not a fade.
Also known as: typing cursor, terminal cursor, text caret.
Generating
HTML
<div class="ldr-blinking-cursor" role="status" aria-label="Waiting for response"> Generating<span aria-hidden="true"></span> </div>
CSS
.ldr-blinking-cursor {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
font: 500 calc(var(--s) / 2.4) / 1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--c);
}
.ldr-blinking-cursor span {
display: inline-block;
width: 0.55em;
height: 1.1em;
margin-left: 0.15em;
vertical-align: text-bottom;
background: var(--c);
animation: ldr-blinking-cursor-blink 1s steps(2, start) infinite;
}
@keyframes ldr-blinking-cursor-blink {
to { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-blinking-cursor, .ldr-blinking-cursor *, .ldr-blinking-cursor::before, .ldr-blinking-cursor::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.