Skip to content
Avenue Luxe

Loading Animations

A complete loading animation system with four distinct animation types featuring luxury styling and brand identity.

Animation Types

Section titled “Animation Types”

Spinner

Section titled “Spinner”

Rotating ring with gold gradient. Use for button loading states, AJAX requests, and general loading indicators.

Sizes: small (24px), medium (48px), large (72px)

{% render 'loading-animation', type: 'spinner', size: 'medium' %}
{% render 'loading-animation', type: 'spinner', size: 'large', text: 'Loading...' %}

Skeleton Screen

Section titled “Skeleton Screen”

Shimmer effect over placeholder content boxes. Use for product card loading, content placeholders, and section loading.

{% render 'loading-animation', type: 'skeleton' %}

Curtain

Section titled “Curtain”

Full-screen curtain that parts to reveal content. Use for page load animations and luxury brand experiences.

{% render 'loading-animation', type: 'curtain' %}
{% render 'loading-animation', type: 'curtain', text: 'Welcome' %}

Pulsing Dots

Section titled “Pulsing Dots”

Three dots with staggered pulsing. Use for inline loading text, form submissions, and compact loading states.

Sizes: small (6px), medium (8px), large (12px)

{% render 'loading-animation', type: 'dots', size: 'small' %}

JavaScript API

Section titled “JavaScript API”

Show Loading

Section titled “Show Loading”
LoadingAnimation.show('#product-container', {
  type: 'spinner',
  size: 'large',
  text: 'Loading products...',
  overlay: true
});

Hide Loading

Section titled “Hide Loading”
LoadingAnimation.hide('#product-container');

Customization

Section titled “Customization”

Colors

Section titled “Colors”
.loading-animation__spinner-ring {
  border-top-color: #YOUR_COLOR;
  border-right-color: #YOUR_COLOR;
}

Timing

Section titled “Timing”
.loading-animation__spinner-ring {
  animation-duration: 1s; /* Faster spinner */
}

Accessibility

Section titled “Accessibility”

All animations include proper ARIA attributes (role="status", aria-live="polite") and visually hidden text for screen readers. Animations respect prefers-reduced-motion preferences.

Best Practices

Section titled “Best Practices”
  1. Use appropriate types — Skeleton for content, spinner for actions
  2. Provide loading text — Improves accessibility and UX
  3. Remove when done — Always hide loading states after completion
  4. Handle errors — Show error states if loading fails
  5. Avoid overuse — Don’t show loading for instant operations