How to Add Lottie File Preloader Animation in WordPress?

Table of Contents

Lottie files are vector animations that are lightweight and highly customisable, making them an excellent choice for preloader animations on WordPress websites. By adding a Lottie file preloader animation to your website, you can create a visually stunning loading experience that keeps visitors engaged while your site loads.

With the Preloader block from The Plus Blocks for Gutenberg, you can easily add Lottie Files on your WordPress website as loading animations.

To check the complete feature overview documentation of The Plus Blocks for Gutenberg Preloader block, click here.

Requirement  – This block is a part of The Plus Blocks for Gutenberg, make sure its installed & activated to enjoy all its powers.

First, go to LottieFiles.com and create a free account there if you don’t have one.

Now log into your account and go to Featured here, you’ll find all the free Lottie files.

Click on the animation you like, it will open in a popup, copy the Lottie file URL from the Lottie Animation URL field. You need to have an account on Lottiefiles.com to copy the animation URL.

copy lottie files url
How to Add Lottie File Preloader Animation in WordPress? 4

Now add the Preloader block on the page or template, in the Pre Loader tab, you’ll find an item under Layers.

Open the item and select Lottie from the Select Type dropdown.

In the JSON URL field, paste the copied Lottie file URL.

preloader lottie
How to Add Lottie File Preloader Animation in WordPress? 5

You can manage the Lottie File width and height from the Width and Height section, respectively. From the Speed slider, you can increase the Lottie File animation speed.

Turn on the Loop Animation toggle to make the animation loop. 

preloader lottie demo
How to Add Lottie File Preloader Animation in WordPress? 6

Also, check How to Exclude a Content From a Preloader in WordPress.

Still in Doubt? Let’s Assist You

Need Help? Ask AI Bot

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Docs