Chat Typing Indicator
A chat thread with animated typing dots — the familiar "someone is typing" bubble.
<div class="chat"><div class="bubble">Hey, are you there?</div><div class="bubble me">Yes! One sec…</div><div class="typing"><span></span><span></span><span></span></div></div>body{background:#f6f7fa}
.chat{width:280px;display:flex;flex-direction:column;gap:10px;font-family:system-ui,sans-serif}
.bubble{max-width:75%;padding:11px 15px;border-radius:16px;font-size:14px;background:#fff;color:#1a1f36;align-self:flex-start;box-shadow:0 2px 6px rgba(20,25,50,.06)}
.bubble.me{align-self:flex-end;background:linear-gradient(135deg,#5b6cff,#7c5cff);color:#fff}
.typing{align-self:flex-start;background:#fff;padding:14px 16px;border-radius:16px;display:flex;gap:5px;box-shadow:0 2px 6px rgba(20,25,50,.06)}
.typing span{width:8px;height:8px;border-radius:50%;background:#aab2c5;animation:tp 1.3s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-7px);opacity:1}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.