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

hTWOo Patterns to setup custom style guide

---
title: Shimmer Circle
order: 40
---

# Shimmer Circle

A circular shimmer placeholder for avatar, icon, or circular image content that's still loading.

## Overview

The shimmer circle provides an animated loading state for circular UI elements. It's designed to represent the loading state of avatars, profile pictures, circular icons, or other circular content until the actual content is ready to be displayed.

## Usage

Shimmer circles should be used when:
* Loading circular content like user avatars or profile images
* Maintaining UI layout consistency during loading states
* Providing visual feedback for loading circular elements
* Replacing circular images or icons that are still being fetched

## Variants

Shimmer circles can 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

* `.hoo-ph-circle` - Base circle shimmer class
* `.hoo-ph-primary` - Primary theme coloring
* `.hoo-ph-neutral` - Neutral theme coloring
* `.hoo-ph-fancy` - Fancy gradient theme

## Animation

The shimmer effect uses a background gradient animation that moves from left to right, creating a shimmering effect that indicates content is loading. The animation runs continuously until the actual content is loaded and the shimmer is replaced.

## Accessibility

* When replacing content with shimmer placeholders, maintain the same layout and spacing
* Use `aria-busy="true"` on container elements during loading
* Avoid conveying essential information solely through the shimmer effect
* Consider using `aria-hidden="true"` on purely decorative shimmer elements