Chat Skeleton
Incoming and outgoing message bubbles pop in one after another from their tail corner, then clear out oldest first. Outgoing bubbles use a stronger tint so the two sides read at a glance.
Also known as: chat message skeleton, messaging placeholder, chat bubbles loading.
HTML
<div class="ldr-skeleton-chat" role="status" aria-label="Loading content"> <div class="ldr-skeleton-chat-in"><span class="ldr-skeleton-chat-avatar"></span><span class="ldr-skeleton-chat-bubble"></span></div> <div class="ldr-skeleton-chat-out"><span class="ldr-skeleton-chat-bubble"></span></div> <div class="ldr-skeleton-chat-in"><span class="ldr-skeleton-chat-avatar"></span><span class="ldr-skeleton-chat-bubble"></span></div> <div class="ldr-skeleton-chat-out"><span class="ldr-skeleton-chat-bubble"></span></div> </div>
CSS
.ldr-skeleton-chat {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--r: calc(var(--s) / 4);
display: grid;
gap: calc(var(--s) / 6);
width: calc(var(--s) * 5.4);
}
.ldr-skeleton-chat > div {
--i: 0;
display: flex;
align-items: flex-end;
gap: calc(var(--s) / 7);
opacity: 0;
animation: ldr-skeleton-chat-pop 5s calc(var(--i) * 0.36s) infinite;
}
.ldr-skeleton-chat > div:nth-child(2) { --i: 1; }
.ldr-skeleton-chat > div:nth-child(3) { --i: 2; }
.ldr-skeleton-chat > div:nth-child(4) { --i: 3; }
.ldr-skeleton-chat-in { transform-origin: 0 100%; }
.ldr-skeleton-chat-out {
justify-content: flex-end;
transform-origin: 100% 100%;
}
.ldr-skeleton-chat-avatar {
flex: none;
width: calc(var(--s) * 0.42);
height: calc(var(--s) * 0.42);
border-radius: 50%;
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-skeleton-chat-bubble {
width: calc(var(--s) * 2.8);
height: calc(var(--s) * 0.5);
border-radius: var(--r) var(--r) var(--r) calc(var(--s) / 16);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-skeleton-chat-out .ldr-skeleton-chat-bubble {
width: calc(var(--s) * 2.1);
border-radius: var(--r) var(--r) calc(var(--s) / 16) var(--r);
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 38%, transparent);
}
.ldr-skeleton-chat > div:nth-child(3) .ldr-skeleton-chat-bubble { width: calc(var(--s) * 2); height: calc(var(--s) * 0.82); }
.ldr-skeleton-chat > div:nth-child(4) .ldr-skeleton-chat-bubble { width: calc(var(--s) * 1.4); }
@keyframes ldr-skeleton-chat-pop {
0% { opacity: 0; transform: translateY(calc(var(--s) / 5)) scale(0.6); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
8% { opacity: 1; transform: none; }
70% { opacity: 1; transform: none; animation-timing-function: ease-in; }
78%, 100% { opacity: 0; transform: translateY(calc(var(--s) / -6)) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-skeleton-chat, .ldr-skeleton-chat *, .ldr-skeleton-chat::before, .ldr-skeleton-chat::after, .ldr-skeleton-chat *::before, .ldr-skeleton-chat *::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.