---
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-05-28
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/05/lottie-file-preloader-animation-in-wordpress-1024x519.jpg
word_count: 320
---

# How to Add Lottie File Preloader Animation in WordPress?

## Key Takeaways

- Nexter Blocks Preloader block adds Lottie files to a WordPress website as loading animations.
- LottieFiles.com provides free Lottie files through Featured, and the Asset Link Format is set to Lottie JSON before copying the file URL.
- Preloader block controls the animation with Width (px), Height (px), Speed slider, and Loop Animation toggle.

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](/docs/preloader-block-settings-overview/).

**Requirement – This block is part of Nexter Blocks. Make sure it is installed and activated.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/)

First, go to [LottieFiles.com](https://lottiefiles.com/) and create a free account if you do not have one.

Log into your account and go to [Featured](https://lottiefiles.com/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.

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-type-lottie-new.png)

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](https://nexterwp.com/docs/exclude-content-from-preloader-in-wordpress/).