标签：#lottie

Two file formats. Same animations. Very different performance characteristics. If you've used Lottie before, you know the .json file — you export it from After Effects with the Bodymovin plugin, drop it into lottie-web, done. But there's a newer format: .lottie. It's a binary container that replaces the JSON, and if you're starting a new project, it's worth understanding the difference. What is Lottie JSON? The original format. A .json file that describes vector animations: shapes, keyframes, layers, colors, timing. It's plain text, human-readable, and widely supported. Pros: Works everywhere Lottie is supported Human-readable (you can inspect and edit it) Supported by every tool and library Cons: Large files (uncompressed JSON with lots of repeated data) No built-in support for multiple animations in one file No metadata or preview image support What is .lottie? The .lottie format (sometimes called dotLottie) is a ZIP container with a .lottie extension. Inside it contains: The animation data (compressed JSON) A manifest.json describing the file Optional preview images Optional multiple animations in one container It was developed by LottieFiles and adopted as the preferred format for modern Lottie tooling. Pros: ~30-70% smaller than equivalent JSON (thanks to compression) Can contain multiple animations in one file Supports preview thumbnails Cleaner API in the @lottiefiles/dotlottie-web renderer Cons: Binary format — not human-readable Requires the dotLottie player (not the older lottie-web) Slightly less universal support File Size Comparison For a typical 2-second UI animation: Format Typical Size Lottie JSON (.json) 40 – 120 KB dotLottie (.lottie) 15 – 50 KB The size reduction comes from standard ZIP compression applied to the JSON content. It's meaningful on mobile connections. Converting Between Formats The easiest way to convert between .json and .lottie formats is using the free browser-based tools at IconKing . No signup required, no file size limits. Just

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 l

Lottie animations are small, crisp, and interactive. This guide covers finding free animations through production-ready implementation. What Is Lottie? Lottie is a JSON-based animation format from Airbnb. After Effects animations are exported via Bodymovin as small JSON files (10-100KB), rendered by a lightweight JS library. Key advantages over GIF: 10-50x smaller file size Resolution independent vector quality on any screen Interactive — play, pause, seek, speed control Full alpha transparency — no halo effects Step 1: Get Free Lottie JSON Files IconKing Free Lottie Library — 500+ free animations: UI icons, loaders, flags, illustrations. No account needed. Preview any file first: iconking.net/preview — drag and drop to instantly see how it plays. Edit colors and speed: iconking.net/editor — swap colors, adjust timing, all in-browser. Step 2: Install lottie-web npm install lottie-web Or CDN: <script src= "https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js" ></script> Step 3: Basic Implementation import lottie from ' lottie-web ' ; const animation = lottie . loadAnimation ({ container : document . getElementById ( ' lottie-container ' ), renderer : ' svg ' , loop : true , autoplay : true , path : ' /animations/my-animation.json ' }); Step 4: React Component import { useEffect , useRef } from ' react ' ; import lottie from ' lottie-web ' ; function LottieAnimation ({ src , loop = true , size = 200 }) { const ref = useRef ( null ); useEffect (() => { const anim = lottie . loadAnimation ({ container : ref . current , renderer : ' svg ' , loop , autoplay : true , path : src }); return () => anim . destroy (); }, [ src ]); return < div ref = { ref } style = { { width : size , height : size } } />; } Step 5: Playback Controls animation . play (); animation . pause (); animation . setSpeed ( 1.5 ); animation . goToAndStop ( 30 , true ); // frame 30 animation . playSegments ([ 0 , 60 ], true ); // frames 0-60 only animation . addEventListener ( ' complete