Comment Thread Skeleton
A comment, two indented replies hanging off a curved thread line, and a second comment. The shimmer starts one step later on each comment, so it visibly flows down the thread.
Also known as: comment section skeleton, nested replies placeholder, discussion thread loading.
HTML
<div class="ldr-skeleton-comments" role="status" aria-label="Loading content"> <div class="ldr-skeleton-comments-item"><span class="ldr-skeleton-comments-avatar"></span><span class="ldr-skeleton-comments-body"><span></span><span></span><span></span></span></div> <div class="ldr-skeleton-comments-item ldr-skeleton-comments-reply"><span class="ldr-skeleton-comments-avatar"></span><span class="ldr-skeleton-comments-body"><span></span><span></span></span></div> <div class="ldr-skeleton-comments-item ldr-skeleton-comments-reply"><span class="ldr-skeleton-comments-avatar"></span><span class="ldr-skeleton-comments-body"><span></span><span></span></span></div> <div class="ldr-skeleton-comments-item"><span class="ldr-skeleton-comments-avatar"></span><span class="ldr-skeleton-comments-body"><span></span><span></span></span></div> </div>
CSS
.ldr-skeleton-comments {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
display: grid;
gap: calc(var(--s) / 5);
width: calc(var(--s) * 5.6);
}
.ldr-skeleton-comments-item {
--i: 0;
--a: calc(var(--s) * 0.56);
position: relative;
display: flex;
gap: calc(var(--s) / 5);
}
.ldr-skeleton-comments-item:nth-child(2) { --i: 1; }
.ldr-skeleton-comments-item:nth-child(3) { --i: 2; }
.ldr-skeleton-comments-item:nth-child(4) { --i: 3; }
.ldr-skeleton-comments-reply {
--a: calc(var(--s) * 0.42);
margin-left: calc(var(--s) * 0.7);
}
.ldr-skeleton-comments-reply::before {
content: "";
position: absolute;
left: calc(var(--s) * -0.42);
top: calc(var(--s) * -0.3);
width: calc(var(--s) * 0.32);
height: calc(var(--s) * 0.3 + var(--a) / 2);
border: solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
border-width: 0 0 1px 1px;
border-bottom-left-radius: calc(var(--s) / 4);
}
.ldr-skeleton-comments-reply + .ldr-skeleton-comments-reply::before {
top: calc(var(--s) * -0.52);
height: calc(var(--s) * 0.52 + var(--a) / 2);
}
.ldr-skeleton-comments-avatar {
flex: none;
width: var(--a);
height: var(--a);
border-radius: 50%;
}
.ldr-skeleton-comments-body {
flex: 1;
display: grid;
gap: calc(var(--s) / 9);
align-content: start;
padding-top: calc(var(--s) / 24);
}
.ldr-skeleton-comments-body span {
height: calc(var(--s) / 7);
border-radius: var(--s);
}
.ldr-skeleton-comments-body span:first-child { width: 30%; height: calc(var(--s) / 6); }
.ldr-skeleton-comments-body span:nth-child(2) { width: 92%; }
.ldr-skeleton-comments-body span:nth-child(3) { width: 62%; }
.ldr-skeleton-comments-reply .ldr-skeleton-comments-body span:nth-child(2) { width: 74%; }
.ldr-skeleton-comments-item:nth-child(4) .ldr-skeleton-comments-body span:nth-child(2) { width: 80%; }
.ldr-skeleton-comments-avatar,
.ldr-skeleton-comments-body span {
background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent) 50%, color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent) 70%) 100% 0 / 300% 100%;
animation: ldr-skeleton-comments-shimmer 1.8s ease-in-out calc(var(--i) * 0.16s) infinite;
}
@keyframes ldr-skeleton-comments-shimmer {
to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-skeleton-comments, .ldr-skeleton-comments *, .ldr-skeleton-comments::before, .ldr-skeleton-comments::after, .ldr-skeleton-comments *::before, .ldr-skeleton-comments *::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.