Typing Loader

타이핑 로더

Text that appears letter by letter with a blinking cursor, as if being typed live.

Also known as: Typewriter loaderConsole loader
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="tp"><span class="tp-text">불러오는 중</span><i class="tp-cur"></i></div>
  <span class="cap">steps() 타자 효과 + 커서 blink</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.tp{display:flex;align-items:center;font-size:clamp(12px,3.4vmin,17px);font-weight:600;color:var(--fg)}
.tp-text{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:type 2.4s steps(6,end) infinite}
.tp-cur{width:2px;height:1em;background:var(--accent);margin-left:2px;animation:curblink .8s step-end infinite}
@keyframes type{0%,8%{width:0}70%,100%{width:5.4em}}
@keyframes curblink{50%{opacity:0}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

An indeterminate indicator for text-shaped work — a terminal command running, an AI response being generated — that communicates "text is being produced right now" more specifically than a plain dot or spinner. If text is genuinely streaming in (see the ai-ux entry typing-indicator for a chat UI), don't fake this effect on top of it — appending the real characters as they arrive is more honest than pretend-typing followed by the whole answer dropping in at once, which feels like a trick.

An element whose width grows from 0 to the full text length sits under overflow: hidden, with animation-timing-function set to steps(character count) so the reveal snaps letter by letter instead of stretching smoothly — the classic typewriter effect. A block element placed after the text gets its own blinking opacity animation to stand in for the cursor, and after the typing finishes it pauses briefly before looping from the start.

A skeleton fits a long wait covering the whole screen better; skip this under 200ms. Give the wrapper role="status" and aria-live="polite" — if the typed phrase is itself a status message like "Loading…", it's fine for a screen reader to read it as-is. Under prefers-reduced-motion, show the whole phrase at once and keep just the cursor blink, or make the cursor static too.