ComponentsSkeleton

Skeleton

atom

Loading placeholders that match the shape of what’s coming.

Activity feed
Loading the latest updates…

Recipe CSS

This is the exact CSS your kit ships for Skeleton — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Skeleton === */
.sk {
  background: linear-gradient(90deg, var(--k-surface-2) 0%, var(--k-surface-raised) 50%, var(--k-surface-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--k-radius-md);
  animation: sk 1.5s ease-in-out infinite;
}
@keyframes sk { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }