Notification Feed Skeleton

<div class="ldr-skeleton-notifications" role="status" aria-label="Loading content">
  <div class="ldr-skeleton-notifications-row"><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-notifications-row"><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-notifications-row"><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-notifications-row"><span></span><span></span><span></span></div>
</div>

.ldr-skeleton-notifications {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --h: calc(var(--s) * 0.68);
  --slot: calc(var(--h) + var(--s) / 7);
  position: relative;
  width: calc(var(--s) * 5.4);
  height: calc(var(--slot) * 2 + var(--h));
}
.ldr-skeleton-notifications-row {
  --i: 0;
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr 1fr;
  column-gap: calc(var(--s) / 5);
  row-gap: calc(var(--s) / 12);
  align-items: center;
  box-sizing: border-box;
  height: var(--h);
  padding: calc(var(--s) / 8) calc(var(--s) / 5) calc(var(--s) / 8) calc(var(--s) / 8);
  border-radius: calc(var(--s) / 7);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
  opacity: 0;
  animation: ldr-skeleton-notifications-feed 6s calc(var(--i) * -1.5s) infinite;
}
.ldr-skeleton-notifications-row:nth-child(2) { --i: 1; }
.ldr-skeleton-notifications-row:nth-child(3) { --i: 2; }
.ldr-skeleton-notifications-row:nth-child(4) { --i: 3; }
.ldr-skeleton-notifications-row span {
  height: calc(var(--s) / 7);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-skeleton-notifications-row span:nth-child(1) {
  grid-row: span 2;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.44);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-notifications-row span:nth-child(2) { width: 58%; align-self: end; }
.ldr-skeleton-notifications-row span:nth-child(3) { grid-column: 2; width: 86%; height: calc(var(--s) / 9); align-self: start; background: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent); }
.ldr-skeleton-notifications-row:nth-child(2n) span:nth-child(2) { width: 44%; }
.ldr-skeleton-notifications-row:nth-child(3) span:nth-child(3) { width: 70%; }
.ldr-skeleton-notifications-row::after {
  content: "";
  grid-area: 1 / 3 / 3 / 4;
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 7);
  border-radius: 50%;
  background: var(--c);
  animation: ldr-skeleton-notifications-unread 6s calc(var(--i) * -1.5s) infinite;
}
@keyframes ldr-skeleton-notifications-feed {
  0%, 3%    { opacity: 0; transform: translateY(calc(var(--s) / -5)) scale(0.94); animation-timing-function: cubic-bezier(0.3, 1.3, 0.6, 1); }
  8%, 25%   { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  30%, 50%  { opacity: 1; transform: translateY(var(--slot)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  55%, 75%  { opacity: 1; transform: translateY(calc(var(--slot) * 2)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  80%, 100% { opacity: 0; transform: translateY(calc(var(--slot) * 2 + var(--s) / 3)) scale(0.96); }
}
@keyframes ldr-skeleton-notifications-unread {
  0%, 26%   { transform: scale(1); }
  32%, 100% { transform: scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-skeleton-notifications, .ldr-skeleton-notifications *, .ldr-skeleton-notifications::before, .ldr-skeleton-notifications::after, .ldr-skeleton-notifications *::before, .ldr-skeleton-notifications *::after {
    animation-duration: 3s;
  }
}

Similar loaders