---
title: "How to Add Lottie File Preloader Animation in WordPress?"
url: https://qa.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://qa.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

- Utilizes Lottie files for lightweight and customizable preloader animations on WordPress websites.
- Employs the Preloader block from Nexter Blocks to integrate Lottie files as loading animations.
- Targets agency sites, WooCommerce stores, and creative websites for enhanced loading experiences.

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