--- title: "How to Add Lottie File Preloader Animation in WordPress?" url: https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/ date: 2023-04-10 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "A still logo says the page is loading; a real animation says it is still working. The Pre Loader block plays a Lottie file, which stays sharp at any size..." image: https://nexterwp.com/wp-content/uploads/2024/05/lottie-file-preloader-animation-in-wordpress-1024x519.jpg word_count: 430 --- # How to Add Lottie File Preloader Animation in WordPress? ## Key Takeaways - Pre Loader block plays a Lottie JSON file in Nexter Blocks Pro, and the file stays sharp at any size while weighing far less than a video. - Pre Loader block requires a Lottie JSON URL uploaded to the Media Library, and the block is enabled under Nexter > Blocks in the WordPress dashboard. - Pre Loader block covers the whole screen on the published page until loading finishes, then swaps tpgb-body-preloader for tpgb-loaded and removes the overlay. A still logo says the page is loading; a real animation says it is still working. The Pre Loader block plays a Lottie file, which stays sharp at any size and weighs far less than a video. *For every Pre Loader setting in one place, see the [Pre Loader block guide](https://nexterwp.com/docs/add-preloader-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/) ## Before You Start - **Edition:** **Pro** — the Pre Loader block is part of Nexter Blocks Pro.- **Block to enable:** Pre Loader, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A Lottie JSON file:** exported from After Effects or downloaded from a Lottie library, and uploaded to your Media Library so it has a URL. ## Steps - Add the **Pre Loader** block to the page and click **Design from Scratch**. - In the **Pre Loader** panel, click **+ Add Item** and set **Select Type** to **Lottie**. ![A Pre Loader item with Select Type set to Lottie](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-lottie.webp) - Paste the JSON file's URL into the Lottie field on the item. - Set **Width** and **Height**, and decide whether it should **Loop** and how fast it plays. - Publish the page and open it in a new tab. > *The editor only shows a small static preview of the loader. On the published page it covers the whole screen until loading finishes.* ## How It Behaves - The animation plays on the overlay for as long as the page is loading.- Looping matters here: a non-looping animation finishes and then sits still if loading takes longer than it does, so leave loop on unless the animation is deliberately long.- Speed is a multiplier on the file's own timing rather than a fixed duration.- While the page is loading, the block adds `tpgb-body-preloader` to the page and shows the overlay. Once loading finishes it swaps in `tpgb-loaded` and the overlay goes away. ## Limitations - **Pro only.**- The file must be a Lottie JSON reachable over the web. A *.lottie* archive or a local file will not play.- The JSON has to download before it can play, so a very detailed animation can arrive late on a slow connection — exactly when the loader matters most.- The editor shows only a static preview of the loader area. ## Troubleshooting ### Nothing plays Open the JSON URL directly in a browser tab. If it does not load there, it will not load here — check the file uploaded correctly and the URL is complete. ### The animation plays once and freezes Switch **Loop** on so it keeps playing until the page is ready. ### It is too big or too small Set **Width** and **Height** on the item. Lottie scales cleanly, so there is no quality cost either way. ## Related Docs - [Image preloader animation](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/)- [Custom CSS preloader animations](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/)- [Pre Loader block: all settings](https://nexterwp.com/docs/add-preloader-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding a Lottie preloader in WordPress?** A: Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Pre Loader block in Pro only. You also need the block enabled under Nexter > Blocks in your WordPress dashboard and a Lottie JSON file uploaded to your Media Library so it has a URL. That setup matters because the block plays a web-reachable JSON file, not a local asset. **Q: Why is my Lottie preloader not playing on the page?** A: The fastest check is the JSON URL itself. Open it directly in a browser tab first. If it does not load there, it will not load in the Pre Loader block either. The file has to be a Lottie JSON reachable over the web, so a broken upload or incomplete URL stops playback before the loader ever appears. **Q: Should a Lottie preloader loop or play once?** A: Looping is the safer choice for a preloader because loading time is unpredictable. The page notes that a non-looping animation can finish and then sit still if the page is still loading. In practice, that looks broken even though the loader is working. Keep loop on unless the animation is intentionally long enough to cover the full load. **Q: Does this work with .lottie files or local files?** A: The Pre Loader block plays a Lottie JSON file only. A .lottie archive or a local file will not play. That limitation matters because the animation must be downloadable over the web before it can render on the overlay. If you want this exact workflow in Nexter Blocks Pro, export from After Effects or use a Lottie library file that gives you a JSON URL. **Q: Why does the animation look different in the editor than on the live page?** A: The editor shows only a small static preview of the loader area. On the published page, the overlay covers the whole screen until loading finishes. That difference is normal and important when testing size or motion, because the real behavior only shows up after publish in a new tab. **Q: How do I fix a Lottie preloader that is too big or too small?** A: Width and Height control the size of the item, and Lottie scales cleanly without quality loss. That means resizing is mostly about layout fit rather than image sharpness. If it feels off in preview, adjust those two values first instead of trying to replace the file just to change dimensions.