Slot hooks

Use [data-slot="skeleton"] as the base selector, then branch by data-animated and data-rounded for shimmer and shape states.

CSS starter

This starter keeps the primitive minimal while giving you a straightforward shimmer gradient and state-driven corner treatment.

[data-slot="skeleton"] {
  background: linear-gradient(
    90deg,
    var(--tng-semantic-foreground-secondary) 0%,
    var(--tng-semantic-border-subtle) 50%,
    var(--tng-semantic-foreground-secondary) 100%
  );
  background-size: 220% 100%;
}

[data-slot="skeleton"][data-rounded="true"] {
  border-radius: 0.6rem;
}

[data-slot="skeleton"][data-rounded="false"] {
  border-radius: 0;
}

[data-slot="skeleton"][data-animated="true"] {
  animation: tng-skeleton-shimmer 1.3s linear infinite;
}

@keyframes tng-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

Motion guidance

• Keep shimmer subtle and lateral so placeholders feel calm rather than distracting.
• Disable or reduce shimmer on dense dashboards or in areas where motion competes with real status feedback.
• Vary placeholder widths and block sizes to mirror the loaded content rhythm more convincingly.
• Reserve square-corner placeholders for media and rigid surfaces where rounded blocks would look misleading.