Showing 24 of 200 animationsBrowse All 100+ Categories
Developer Quick Start
How to use these loading & spinners in your application
Download the JSON file or dotLottie asset and integrate it with your favourite framework in under 2 minutes:
// 1. Install Lottie for React / Next.js
npm install @lottiefiles/dotlottie-react
// 2. Render smooth 60 FPS animation
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
export default function Loader() {
return (
<DotLottieReact
src="/animations/loading-animation.json"
loop
autoplay
style={{ width: 120, height: 120 }}
/>
);
}
npm install @lottiefiles/dotlottie-react
// 2. Render smooth 60 FPS animation
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
export default function Loader() {
return (
<DotLottieReact
src="/animations/loading-animation.json"
loop
autoplay
style={{ width: 120, height: 120 }}
/>
);
}
Frequently Asked Questions
Frequently Asked Questions about Loading & Spinners
Why should I use Lottie loading animations instead of animated GIFs?
Lottie animations are resolution-independent vector graphics written in JSON. They are typically 80% to 90% smaller than high-resolution GIFs, render at a buttery-smooth 60 FPS on iOS, Android, and web, and support dynamic speed, looping, and color manipulation.
How do I add these loading animations to a Next.js or React application?
You can use the official `@lottiefiles/dotlottie-react` or `lottie-react` packages. Download the free JSON file or copy our embed snippet directly into your component with autoplay and loop enabled.
Are these loading animations free for commercial use?
Yes, all animations in the RafayLabs Lottie Library are free to download and use in both personal and commercial digital products, apps, websites, and SaaS platforms.