@n8d/htwoo-patterns/_patterns/atoms/loading/shimmer-img.md

hTWOo Patterns to setup custom style guide

---
title: Shimmer Image
order: 70
---

# Shimmer Image

A placeholder for image content that's still loading, displayed with a shimmer effect.

## Overview

The shimmer image provides an animated loading state for image elements. It uses a transparent placeholder image with CSS classes to create a shimmer effect, maintaining layout consistency while the actual image is loading.

## Usage

Shimmer images should be used when:
* Loading actual image content that may take time to fetch
* Maintaining layout stability during image loading
* Providing visual feedback for image loading states
* Creating skeleton screens for image-heavy interfaces

## Variants

* **Default/Standard** - Basic rectangular image placeholder
* **1:1** - Square aspect ratio image placeholder
* **16:9** - Widescreen aspect ratio image placeholder
* **16:10** - Common screen aspect ratio image placeholder

Shimmer images can also be styled with different theme classes:
* **Default** - Standard neutral shimmer effect
* **Primary** - Primary theme colored shimmer
* **Neutral** - Explicitly neutral shimmer
* **Fancy** - Multi-colored gradient shimmer effect

## SCSS

**Component Import**

**SCSS Partial Location**

## CSS Classes

* Base class (apply one of the following):
  * `.hoo-ph-squared` - Standard rectangle shimmer effect
  * `.hoo-ph-circle` - Circle shimmer effect (for round images)

* Theme classes (optional):
  * `.hoo-ph-primary` - Primary theme coloring
  * `.hoo-ph-neutral` - Neutral theme coloring
  * `.hoo-ph-fancy` - Fancy gradient theme

## Accessibility

* Always include appropriate `width` and `height` attributes to prevent layout shifts
* Use `alt=""` for decorative shimmer images
* Use appropriate `aria-busy="true"` on container elements during loading
* Consider using `aria-hidden="true"` for purely decorative shimmer elements