Loading states are one of the most overlooked parts of app UX. A bad spinner makes an app feel cheap. A good loading animation makes wait time feel intentional.

Here's a curated list of free loading animations you can use right now, organized by format.

Lottie Loading Animations (Best Quality)

Lottie is the gold standard for loading animations in 2025. Files are small (5-30KB), resolution-independent, and perfectly smooth at any size.

IconKing Free Lottie Loaders — 500+ free Lottie animations including dozens of loading spinners, progress indicators, and transition animations. Download as JSON, no account required.

Preview any file before downloading at iconking.net/preview.

Customize colors to match your brand at iconking.net/editor — swap any color in-browser.

Implementation (React):

import { useEffect, useRef } from 'react';
import lottie from 'lottie-web';

function Loader({ size = 80 }) {
  const ref = useRef(null);
  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: ref.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: '/animations/loader.json'
    });
    return () => anim.destroy();
  }, []);
  return <div ref={ref} style={{ width: size, height: size }} />;
}

Implementation (Vanilla JS):

import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('loader'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/loader.json'
});

Convert Lottie Loaders to GIF

Need the loading animation as a GIF for emails, Notion docs, or environments where you can't run JavaScript?

Free Lottie to GIF Converter — upload your JSON, get a GIF. Browser-based, no signup.

Other export formats available at iconking.net:

• Lottie to WebP — animated WebP, smaller than GIF
• Lottie to APNG — animated PNG with transparency
• Lottie to MP4 — for video embeds
• Lottie to WebM — transparent video
• Lottie to SVG — static frame as SVG

CSS SVG Spinners (Zero Dependencies)

For simple loading indicators where you don't want any JS library, CSS + SVG is the right call.

Basic spinning ring:

<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
  <circle cx="20" cy="20" r="16" stroke="#e5e7eb" stroke-width="4"/>
  <circle cx="20" cy="20" r="16" stroke="#6366f1" stroke-width="4"
    stroke-dasharray="80 24" stroke-linecap="round">
    <animateTransform attributeName="transform" type="rotate"
      from="0 20 20" to="360 20 20" dur="0.8s" repeatCount="indefinite"/>
  </circle>
</svg>

CSS-only spinner:

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

<div class="spinner"></div>

Skeleton Screens (Better Than Spinners)

For content-heavy pages, skeleton screens outperform spinners in perceived performance. They fill the layout with gray placeholder shapes while real content loads.

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

<div class="skeleton" style="height: 20px; width: 60%; margin-bottom: 8px;"></div>
<div class="skeleton" style="height: 20px; width: 80%; margin-bottom: 8px;"></div>
<div class="skeleton" style="height: 20px; width: 45%;"></div>

When to Use Each Format

Finding the Right Loading Animation

The IconKing Lottie library has the best selection of free loading animations available without an account. It includes:

• Circular spinners (dots, ring, pulse)
• Progress bars with animation
• Content placeholder transitions
• Success/failure state animations (important for async workflows)
• Branded loading screens

If you need the static SVG version of any icon (for a disabled/placeholder state), the SVG library has matching static versions.

What loading animation pattern works best in your stack? Share in the comments.