ANIM-008 · Skeleton Shimmer | Zemew AI Design Library

ANIM-008

Skeleton Shimmer

Shimmering skeleton blocks for loading placeholders.

More Animations

Details

ID: ANIM-008
Category: Animations
Style: utility
Complexity: moderate
Animation: shimmer
Stable URL: https://zemew.com/guides/ai/library/animations/ANIM-008

skeleton loading shimmer

Recommended uses

Card loading
Feed placeholders

Responsive behavior

Skeleton widths should reflow with the card grid.

Accessibility

Pair with aria-busy and a text loading status for screen readers.

Code examples

Adapt these to your project. Do not paste unrelated branding or colors blindly.

HTML

<!-- Example scaffold for ANIM-008. Adapt to your project. -->
<section id="ANIM-008" class="ai-design-example" data-zemew-component="animations" data-style="utility" data-version="1">
  <!-- Implement using the live preview as the visual reference -->
</section>

CSS

/* Scope demo styles so they cannot affect the rest of the site */
#ANIM-008.ai-design-example {
  /* mirror the preview treatment for ANIM-008 */
}

Machine-readable metadata

The live preview exposes semantic attributes an AI or developer can read from the page source:

id="ANIM-008" data-zemew-component="animations" data-style="utility" data-variant="skeleton" data-animation="shimmer" data-version="1"