Profile Skeleton

<div class="ldr-skeleton-profile" role="status" aria-label="Loading content">
  <span class="ldr-skeleton-profile-cover"></span>
  <span class="ldr-skeleton-profile-avatar"></span>
  <span class="ldr-skeleton-profile-button"></span>
  <span class="ldr-skeleton-profile-name"></span>
  <span class="ldr-skeleton-profile-handle"></span>
  <span class="ldr-skeleton-profile-stats"><span></span><span></span><span></span></span>
</div>

.ldr-skeleton-profile {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --ch: calc(var(--s) * 1.1);
  --a: calc(var(--s) * 0.96);
  --ax: calc(var(--s) * 0.3);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: calc(var(--s) / 10);
  width: calc(var(--s) * 5.6);
  padding-bottom: calc(var(--s) / 4);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 16%, transparent);
  border-radius: calc(var(--s) / 6);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 4%, transparent);
}
.ldr-skeleton-profile > :where(span) {
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-skeleton-profile-cover {
  grid-column: 1 / -1;
  height: var(--ch);
  border-radius: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent));
  -webkit-mask: radial-gradient(circle at calc(var(--ax) + var(--a) / 2) 100%, transparent calc(var(--a) / 2 + var(--s) / 12), #000 calc(var(--a) / 2 + var(--s) / 12 + 1px));
  mask: radial-gradient(circle at calc(var(--ax) + var(--a) / 2) 100%, transparent calc(var(--a) / 2 + var(--s) / 12), #000 calc(var(--a) / 2 + var(--s) / 12 + 1px));
}
.ldr-skeleton-profile-avatar {
  position: absolute;
  top: calc(var(--ch) - var(--a) / 2);
  left: var(--ax);
  width: var(--a);
  height: var(--a);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
}
.ldr-skeleton-profile-avatar::before {
  content: "";
  position: absolute;
  inset: calc(var(--s) / -14);
  border-radius: 50%;
  background: conic-gradient(transparent 0 35%, var(--c));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--s) / 20), #000 calc(100% - var(--s) / 20 + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--s) / 20), #000 calc(100% - var(--s) / 20 + 1px));
  animation: ldr-skeleton-profile-ring 1.1s linear infinite;
}
.ldr-skeleton-profile-button {
  grid-column: 2;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 0.42);
  margin: calc(var(--s) / 20) calc(var(--s) / 4) calc(var(--s) / 20) 0;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent);
}
.ldr-skeleton-profile-name,
.ldr-skeleton-profile-handle,
.ldr-skeleton-profile-stats {
  grid-column: 1 / -1;
  margin-left: calc(var(--s) / 4);
}
.ldr-skeleton-profile-name { width: calc(var(--s) * 2); height: calc(var(--s) / 5); margin-top: calc(var(--s) / 10); }
.ldr-skeleton-profile-handle { width: calc(var(--s) * 1.2); height: calc(var(--s) / 7); background: color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent); }
.ldr-skeleton-profile > .ldr-skeleton-profile-stats {
  display: flex;
  gap: calc(var(--s) / 3);
  margin-top: calc(var(--s) / 10);
  background: none;
}
.ldr-skeleton-profile-stats span {
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) / 6);
  border-radius: var(--s);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ldr-color, #3b82f6) 26%, transparent) 0 32%, transparent 32% 42%, color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent) 42%);
}
.ldr-skeleton-profile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ldr-skeleton-profile-sheen 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ldr-skeleton-profile-ring {
  to { transform: rotate(360deg); }
}
@keyframes ldr-skeleton-profile-sheen {
  70%, 100% { transform: translateX(100%); }
}

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

Similar loaders