Pulse Skeleton

Empty bars that pulse while content loads

Preview

PaletteDarkMonoWarm

HTML

<ul aria-busy="true" aria-label="Loading">
  <li aria-hidden="true"></li>
  <li aria-hidden="true"></li>
  <li aria-hidden="true"></li>
</ul>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

ul {
  display: grid;
  gap: 0.55rem;
  width: min(100%, 16rem);
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  overflow: hidden;
  height: 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 28%, var(--chip));
}

li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--paper) 30%, #fff) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: sheen 1.4s linear infinite;
}

li:nth-child(1) { width: 70%; height: 1.1rem; }
li:nth-child(2)::after { animation-delay: 0.12s; }
li:nth-child(3) { width: 48%; }
li:nth-child(3)::after { animation-delay: 0.24s; }

@keyframes sheen {
  to { transform: translateX(100%); }
}

Tailwind

<style>
:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--paper) 30%, #fff) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: sheen 1.4s linear infinite;
}

li:nth-child(1) { width: 70%; height: 1.1rem; }

li:nth-child(2)::after { animation-delay: 0.12s; }

li:nth-child(3) { width: 48%; }

li:nth-child(3)::after { animation-delay: 0.24s; }

@keyframes sheen {
  to { transform: translateX(100%); }
}
</style>
<ul class="grid gap-[0.55rem] w-[min(100%,_16rem)] p-0 list-none" aria-busy="true" aria-label="Loading">
  <li class="relative overflow-hidden h-[0.85rem] rounded-full bg-[color-mix(in_srgb,_var(--ink)_28%,_var(--chip))]" aria-hidden="true"></li>
  <li class="relative overflow-hidden h-[0.85rem] rounded-full bg-[color-mix(in_srgb,_var(--ink)_28%,_var(--chip))]" aria-hidden="true"></li>
  <li class="relative overflow-hidden h-[0.85rem] rounded-full bg-[color-mix(in_srgb,_var(--ink)_28%,_var(--chip))]" aria-hidden="true"></li>
</ul>