How to Add Lottie File Preloader Animation in WordPress?

Updated on September 18, 2023 by Editorial Team

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 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 to copy the animation URL.

copy lottie files url

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

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

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