---
title: "How to Add Image Preloader Animation in WordPress?"
url: https://nexterwp.com/docs/image-preloader-animation-in-wordpress/
date: 2023-04-10
modified: 2026-04-15
author: "Aditya Sharma"
description: "Do you want to use an image as a preloader for your WordPress website? To keep visitors engaged and informed during loading times, adding a page loading animation to your..."
image: https://nexterwp.com/wp-content/uploads/2024/05/image-preloader-animation-in-wordpress-1024x519.jpg
word_count: 212
---

# How to Add Image Preloader Animation in WordPress?

## Key Takeaways

- Nexter Blocks Preloader block lets a WordPress site use an image as a preloader while the page loads.
- Image as Loader toggle turns the uploaded image into a loader that slowly fills as the page loads.
- Pre Loader tab includes a repeater item under Layers, where Select Type is set to Image and the image is added in the Upload Image field.

Do you want to use an image as a preloader for your WordPress website? To keep visitors engaged and informed during loading times, adding a page loading animation to your WordPress website can be an effective solution. One popular approach is using an image preloader animation, which displays a small graphic or animation while the page loads.

With the Preloader block from Nexter Blocks, you can easily use an image as a preloader for your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks* Preloader block, [click here](/docs/preloader-block-settings-overview/).

***Requirement - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

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

To do this, add the Preloader block on the page or template, in the **Pre Loader** tab, you’ll find a repeater item under **Layers**.

Open the item and select **Image** from the **Select Type** dropdown.

In the **Upload Image** field, add your image.

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

You can turn on the **Image as Loader** toggle to turn your image into a loader. It will slowly fill the image as the page loads.

You can manage the image normal and fill states from the **Image** tab under **Style**.

Also, check [How to Add Text Based Preloader Animation in WordPress](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/).