Dashboard Skeleton

<div class="ldr-skeleton-dashboard" role="status" aria-label="Loading content">
  <div class="ldr-skeleton-dashboard-kpi"><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-dashboard-kpi"><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-dashboard-kpi"><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-dashboard-chart">
    <span></span>
    <svg viewBox="0 0 160 30" aria-hidden="true">
      <path class="ldr-skeleton-dashboard-area" d="M0 22C12 20 18 10 30 12S50 24 62 18 84 6 98 9 124 20 136 14 152 6 160 8V30H0Z"></path>
      <path class="ldr-skeleton-dashboard-line" pathLength="100" d="M0 22C12 20 18 10 30 12S50 24 62 18 84 6 98 9 124 20 136 14 152 6 160 8"></path>
    </svg>
  </div>
</div>

.ldr-skeleton-dashboard {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--s) / 6);
  width: calc(var(--s) * 7);
}
.ldr-skeleton-dashboard-kpi,
.ldr-skeleton-dashboard-chart {
  display: grid;
  gap: calc(var(--s) / 10);
  padding: calc(var(--s) / 6);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  border-radius: calc(var(--s) / 8);
}
.ldr-skeleton-dashboard-kpi:nth-child(2) span { animation-delay: 0.15s; }
.ldr-skeleton-dashboard-kpi:nth-child(3) span { animation-delay: 0.3s; }
.ldr-skeleton-dashboard span {
  height: calc(var(--s) / 8);
  width: 45%;
  border-radius: var(--s);
  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-dashboard-shimmer 1.6s ease-in-out infinite;
}
.ldr-skeleton-dashboard-kpi span:nth-child(2) {
  width: 72%;
  height: calc(var(--s) / 3.5);
  border-radius: calc(var(--s) / 16);
}
.ldr-skeleton-dashboard-kpi span:nth-child(3) {
  width: 32%;
  height: calc(var(--s) / 6.5);
}
.ldr-skeleton-dashboard-chart {
  grid-column: 1 / -1;
}
.ldr-skeleton-dashboard-chart span { width: 24%; }
.ldr-skeleton-dashboard svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  background: repeating-linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent) 0 1px, transparent 1px 33.3%);
}
.ldr-skeleton-dashboard-area {
  fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 14%, transparent);
  animation: ldr-skeleton-dashboard-area 3s ease-in-out infinite;
}
.ldr-skeleton-dashboard-line {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: ldr-skeleton-dashboard-draw 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ldr-skeleton-dashboard-shimmer {
  to { background-position: 0% 0; }
}
@keyframes ldr-skeleton-dashboard-draw {
  0%       { stroke-dashoffset: 100; opacity: 1; }
  60%, 86% { stroke-dashoffset: 0; opacity: 1; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ldr-skeleton-dashboard-area {
  0%, 25%  { opacity: 0; }
  65%, 86% { opacity: 1; }
  100%     { opacity: 0; }
}

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

Similar loaders