Showing 24 of 200 animationsBrowse All 100+ Categories
Developer Quick Start
How to use these shimmer & skeleton loaders 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/shimmer-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/shimmer-loading-animation.json"
loop
autoplay
style={{ width: 120, height: 120 }}
/>
);
}
Frequently Asked Questions
Frequently Asked Questions about Shimmer & Skeleton Loaders
What is a shimmer loading animation?
A shimmer loading animation (or skeleton screen) is a pulsating gradient placeholder that mimics the layout of content before it arrives, giving users visual feedback and reducing perceived loading times.
Can I customize the shimmer speed and canvas background?
Yes, our interactive detail studio allows you to preview animations at 0.5x to 2x speed and switch between dark and light canvases before downloading the JSON or dotLottie asset.