Overview  This asset provides a lightweight skeleton loader built entirely with CSS. It uses custom properties for colors, gradients, and motion easing, ensuring easy customization and adaptability. No JavaScript is required.

Key Features

• Pure CSS implementation: No external scripts needed.

• Customizable appearance: Background and gradient defined with CSS variables.

• Responsive sizing: Default height set to 1.25rem, but can be overridden with utility classes.

• Accessibility-aware: Animation runs only when the user has not enabled prefers-reduced-motion.

• Smooth animation: Uses a cubic-bezier easing curve for natural shimmer effect.

CSS Variables

• --skeleton-semantic-color-background-neutral-tertiary-translucent-default: Base background color (translucent neutral tone).

• --component-skeleton-color-background: Gradient used for shimmer effect.

• --skeleton-semantic-motion-easing-fast-out-slow-in: Motion easing curve for animation.

• --skeleton-background: Fallback background for skeleton element.

• --skeleton-gradient: Fallback gradient for shimmer animation.

Class: .skeleton

• Sets relative positioning and block display.

• Applies background color and rounded corners.

• Ensures overflow is hidden to contain the animation.

• Default width: 100%, default height: 1.25rem.

Animation Behavior

• Defined in @media (prefers-reduced-motion: no-preference).

• Adds a ::before pseudo-element with gradient background.

• Animates from left to right using translateX.

• Keyframes:

  • Initial state: gradient positioned off-screen left.

  • Final state: gradient translated fully to the right.

  • Duration: 1.7s, infinite loop.

Accessibility

• Respects system settings for reduced motion.

• If the user has enabled reduced motion, the shimmer animation is disabled, ensuring compliance with accessibility best practices.