Lottie files are vector animations that are lightweight and highly customizable, making them a strong choice for preloader animations on WordPress websites. By adding a Lottie file preloader animation to your website, you can create a visually engaging loading experience that keeps visitors on the page while your site loads.
With the Preloader block from the Nexter Blocks, you can add Lottie files to your WordPress website as loading animations.
Best Used For:
- Agency and portfolio sites that want a branded, animated loading screen
- WooCommerce stores where a brief preloader improves perceived performance
- Creative websites where the preloader sets the tone before the page reveals
To check the complete feature overview documentation of the Nexter Blocks Preloader block, click here.
Requirement – This block is part of Nexter Blocks. Make sure it is installed and activated.
First, go to LottieFiles.com and create a free account if you do not have one.
Log into your account and go to Featured. Here you will find all the free Lottie files.
Click on the animation you like. It opens in a popup. Click Save to workspace to generate.
The Lottie animation opens in a new window.
From the right panel, enable the Enable Asset Link toggle.
Make sure the Asset Link Format is set to Lottie JSON.
In the Asset link field, the Lottie file URL appears. Copy it.
Now add the Preloader block on the page or template. In the Pre Loader tab, you will find a repeater 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.
From the Width (px) and Height (px) sections, control the Lottie file dimensions. From the Speed slider, increase the animation speed if needed.
Turn on the Loop Animation toggle to make the animation loop.
Also, check How to Exclude a Content From a Preloader in WordPress.
