Free Skeleton Loader Generator
Build an animated skeleton-screen placeholder loader as Lottie — pulsing rows and an optional avatar, fully customizable.
Skeleton settings
Live Preview
Size
-
Duration
-
FPS
30fps
The Free Skeleton Loader Generator for Lottie
Need a skeleton-screen loading placeholder for your app or site? Our free skeleton loader generator builds one as a Lottie animation — pulsing grey bars and an optional avatar that mimic your content while it loads.
Configure the number of lines, sizing, corner radius, color, and pulse, watch the live preview, and download a loopable Lottie you can drop into any platform. No design tool, no upload — it is generated entirely in your browser.
How to Create a Skeleton Loader
A skeleton screen reassures users that content is on the way. Build one in a few clicks:
Set the rows and sizing
Choose the number of lines, bar height, gap and corner radius to roughly match the content you are loading.
Pick a color and avatar
Set the bar color and toggle the avatar header on if you are loading a profile or card layout.
Tune the pulse
Adjust the pulse speed and how faint the trough gets for a subtle or more obvious shimmer.
Preview and download
Watch it loop in the live preview, then download the Lottie JSON.
No upload, no account — generate a loader in under a minute.
Key Features
Fully Configurable Layout
Control the number of lines, bar height, spacing and corner radius so the loader matches the real content it stands in for.
Optional Avatar Header
Turn on an avatar circle with two short bars for profile and card placeholders — perfect for user lists and feeds.
Smooth Pulse / Shimmer
Bars fade in a staggered wave between full and a lower opacity, creating the familiar shimmering loading effect that loops seamlessly.
Live Preview
Every change updates the preview instantly, so you can dial in the look before you download.
Popular Use Cases
List & Feed Placeholders
Show rows of pulsing bars while a list, feed, or table of results loads.
Profile & Card Loaders
Use the avatar header to stand in for a user card or profile section while data is fetched.
Article Placeholders
Mimic a heading and paragraphs with a few full-width lines and a shorter final line.
Dashboard Widgets
Drop a compact skeleton into cards and widgets that load their data asynchronously.
App Startup Loaders
Play a skeleton on first paint so the app feels responsive while the real UI hydrates.
Design-System Loader Asset
Generate a consistent loader to ship in your component library so every team uses the same placeholder.
Pro Tips
Match your content layout
Set the line count and bar height to roughly the shape of the real content so the swap feels seamless.
Keep colors subtle
Light grey bars read as “loading” without distracting. Use a tone close to your background.
Use the avatar for profile cards
Turn the avatar on when the loading content has a picture or icon plus a title and subtitle.
Loop it while fetching
The animation loops seamlessly — play it on repeat until your data arrives, then replace it.
Privacy and Security
We take your privacy seriously. Unlike most online converters that upload your files to remote servers, our tool processes everything locally.
No uploads – Your files are processed entirely in your browser. They never touch our servers.
No tracking – We don't log which files you convert or what settings you use.
No accounts – Use the tool immediately. No registration, no personal data required.
Inspect it yourself – Open DevTools and watch the network tab. You'll see zero file uploads.
Frequently Asked Questions
Everything you need to know about Lottie animations and our tools.
What is a skeleton loader?
A skeleton screen is a placeholder UI shown while content loads — grey pulsing bars and shapes that mimic the layout. This tool generates one as a reusable Lottie animation.
How do I use the generated Lottie?
Download the JSON and play it with any Lottie player (web, iOS, Android, Flutter) while your real content is loading, then swap it out when the content is ready.
Can I match my design?
Yes. Set the number of lines, bar height, gap, corner radius and color, toggle the avatar, and tune the pulse speed and intensity to fit your UI.
Does it include an avatar placeholder?
Optionally. With the avatar on, the loader adds a circle and two short bars (like a profile header) above the paragraph lines.
What is the pulse?
Each bar fades between full and a lower opacity in a staggered wave, creating the familiar shimmering “loading” effect.
Is the animation loopable?
Yes. The pulse returns to its starting opacity at the end of the cycle, so it loops seamlessly.
Are my settings uploaded to a server?
No. The Lottie is generated entirely in your browser. Nothing is uploaded.
Is it free?
Completely free, with no registration, watermarks, or usage limits.