Pricing Table Skeleton: Pure CSS Loading Animation

Pricing Table Skeleton

Three plan columns with the middle one raised and badged. The columns pulse in turn and a spot of light keeps tracing the featured card's border, drawn with a conic gradient on an @property angle.

Also known as: pricing cards skeleton, pricing plans placeholder, subscription plans loading.

Color Size 64px Dark background

HTML

<div class="ldr-skeleton-pricing" role="status" aria-label="Loading content">
  <div class="ldr-skeleton-pricing-plan"><span></span><span></span><span></span><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-pricing-plan ldr-skeleton-pricing-featured"><span></span><span></span><span></span><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-pricing-plan"><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>

CSS

@property --ldr-skeleton-pricing-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.ldr-skeleton-pricing {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: calc(var(--s) / 5);
  width: calc(var(--s) * 6.6);
  padding-top: calc(var(--s) / 5);
}
.ldr-skeleton-pricing-plan {
  position: relative;
  display: grid;
  gap: calc(var(--s) / 8);
  padding: calc(var(--s) / 5);
  border-radius: calc(var(--s) / 7);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
}
.ldr-skeleton-pricing-plan > span {
  height: calc(var(--s) / 8);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
  animation: ldr-skeleton-pricing-pulse 1.8s ease-in-out infinite;
}
.ldr-skeleton-pricing-featured > span { animation-delay: 0.25s; }
.ldr-skeleton-pricing-plan:last-child > span { animation-delay: 0.5s; }
.ldr-skeleton-pricing-plan > span:nth-child(1) { width: 50%; }
.ldr-skeleton-pricing-plan > span:nth-child(2) { width: 72%; height: calc(var(--s) / 3); margin-bottom: calc(var(--s) / 12); border-radius: calc(var(--s) / 14); }
.ldr-skeleton-pricing-plan > span:nth-child(n + 3):nth-child(-n + 5) {
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 36%, transparent) 90%, transparent) 0 50% / calc(var(--s) / 6) 100% no-repeat, linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent) 0 0) 100% 0 / calc(100% - var(--s) / 4) 100% no-repeat;
}
.ldr-skeleton-pricing-plan > span:nth-child(4) { width: 82%; }
.ldr-skeleton-pricing-plan > span:nth-child(5) { width: 64%; }
.ldr-skeleton-pricing-plan > span:nth-child(6) { height: calc(var(--s) * 0.4); margin-top: calc(var(--s) / 12); border-radius: calc(var(--s) / 10); }
.ldr-skeleton-pricing-featured { padding-block: calc(var(--s) / 3.5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent); }
.ldr-skeleton-pricing-featured > span:nth-child(6) { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent); }
.ldr-skeleton-pricing-featured::before {
  content: "";
  position: absolute;
  top: calc(var(--s) / -12);
  left: 50%;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) / 6);
  margin-left: calc(var(--s) * -0.45);
  border-radius: var(--s);
  background: var(--c);
}
.ldr-skeleton-pricing-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: max(1px, calc(var(--s) / 30));
  border-radius: inherit;
  background: conic-gradient(from var(--ldr-skeleton-pricing-a), transparent 0 72%, var(--c) 88%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ldr-skeleton-pricing-trace 2.8s linear infinite;
}
@keyframes ldr-skeleton-pricing-pulse {
  50% { opacity: 0.45; }
}
@keyframes ldr-skeleton-pricing-trace {
  to { --ldr-skeleton-pricing-a: 360deg; }
}

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

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Pricing Table Skeleton

HTML

CSS

Customizing this loader

Similar loaders