DEV Community

Fazal Shah
Fazal Shah

Posted on

Lottie Animations for E-Commerce: Add to Cart, Success States, and Loading

E-commerce conversion depends on UI feedback. A loading spinner that disappears without confirmation feels broken. An "add to cart" with no visual response loses trust. Lottie solves both.

The Case for Lottie in E-Commerce

Three moments in the shopping flow benefit most from animation:

  1. Add to cart — confirm the action worked
  2. Checkout loading — reassure the user during payment processing
  3. Order success — celebrate the conversion

Each of these currently lives as either a static icon, a CSS spinner, or nothing. Lottie upgrades all three in a way that's memorable and measurable (better feedback = fewer abandoned carts).

Add to Cart Animation

The key is: play the animation after the API confirms success, not when the button is clicked.

import { useState, useRef } from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

function AddToCartButton({ productId }) {
  const [state, setState] = useState('idle'); // idle | loading | success
  const lottieRef = useRef(null);

  const handleClick = async () => {
    setState('loading');
    try {
      await addToCart(productId);
      setState('success');
      setTimeout(() => setState('idle'), 2000);
    } catch {
      setState('idle');
    }
  };

  return (
    <button onClick={handleClick} disabled={state === 'loading'}>
      {state === 'idle' && 'Add to Cart'}
      {state === 'loading' && <span className="spinner" />}
      {state === 'success' && (
        <DotLottieReact
          ref={lottieRef}
          src="/animations/cart-success.lottie"
          autoplay
          loop={false}
          style={{ width: 24, height: 24 }}
        />
      )}
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

Payment Processing Loader

During payment, users are anxious. A subtle, looping animation is better than a static spinner — it signals active progress.

function PaymentProcessing({ isProcessing }) {
  if (!isProcessing) return null;

  return (
    <div className="payment-overlay">
      <DotLottieReact
        src="/animations/payment-processing.lottie"
        loop
        autoplay
        style={{ width: 120, height: 120 }}
      />
      <p>Processing your payment...</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Tips for payment loaders:

  • Use a calming, slow animation (not a fast spinner)
  • Add text — "Processing" is better than silent animation
  • Keep the overlay visible until you've confirmed the response from your payment processor

Order Success Animation

The order confirmation page is the highest-emotional moment in the funnel. A Lottie animation here has measurable impact on customer satisfaction scores.

function OrderSuccess({ orderNumber }) {
  return (
    <div className="success-page">
      <DotLottieReact
        src="/animations/order-success.lottie"
        autoplay
        loop={false}
        style={{ width: 200, height: 200 }}
      />
      <h1>Order Confirmed!</h1>
      <p>Order #{orderNumber}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Empty Cart State

Instead of "Your cart is empty" as plain text:

function EmptyCart() {
  return (
    <div className="empty-cart">
      <DotLottieReact
        src="/animations/empty-cart.lottie"
        loop
        autoplay
        style={{ width: 160, height: 160 }}
      />
      <h2>Your cart is empty</h2>
      <a href="/shop">Continue Shopping</a>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Empty states with animation have higher re-engagement rates than static empty states.

Performance Checklist for E-Commerce

  1. Use .lottie format — 75% smaller than .json, convert at IconKing
  2. Lazy-load non-critical animations — the hero animation doesn't need to block checkout
  3. Destroy after play — call destroy() on single-play animations after complete event
  4. Match brand colors — edit Lottie colors to your brand palette at IconKing
  5. Test on mobile — run your Core Web Vitals before and after adding animations

Finding Good E-Commerce Animations

LottieFiles has a free library. Search for: "cart", "success", "checkmark", "payment", "delivery", "shopping".

Before using any file in production:

  1. Preview at IconKing to confirm it renders correctly
  2. Edit colors to match your brand
  3. Convert to .lottie for production

The whole workflow takes under 5 minutes per animation.

Summary

Moment Animation Type Key Rule
Add to cart Short success animation Play AFTER API confirms
Payment loading Looping calm animation Show until payment confirmed
Order success Celebratory one-shot Loop: false, play once
Empty cart Subtle looping illustration Encourage action nearby

Top comments (0)