---
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-08-18
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/).

## Frequently Asked Questions

**Q: Why is my image preloader animation not showing in WordPress?**
A: The Preloader block has to be installed and activated as part of Nexter Blocks before the image loader setup will work. In the block settings, the image is added under the Pre Loader tab through the Layers repeater, then switched to Image in the Select Type dropdown. If the image still does not appear, the usual miss is skipping the Image as Loader toggle or leaving the Upload Image field empty.

**Q: What do I need to add an image preloader animation in WordPress?**
A: Nexter Blocks provides the Preloader block that enables an image-based loading animation on a WordPress site. The page also notes that this block is part of Nexter Blocks, so it needs to be installed and activated first. That matters because the image loader settings live inside that block, not in a separate plugin or theme option.

**Q: Can I use an image as a page loader on a WordPress website?**
A: The Preloader block from Nexter Blocks supports using an image as a loader for a WordPress website. Once the image is set, turning on Image as Loader makes it slowly fill as the page loads. That gives visitors a visual loading cue instead of a blank wait, which is useful when you want the loading state to feel intentional.

**Q: What is the difference between an image preloader and a text-based preloader in WordPress?**
A: An image preloader uses a graphic that can be turned into a loader with Image as Loader, while a text-based preloader uses text instead. The page points to both approaches through Nexter Blocks and also links to [How to Add Text Based Preloader Animation in WordPress](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/). The choice comes down to whether you want a visual graphic or a text-driven loading effect.

**Q: How do I make an uploaded image fill while the page loads?**
A: The Image as Loader toggle controls that behavior in Nexter Blocks. When it is enabled, the uploaded image slowly fills as the page loads, which turns a static graphic into an actual loading indicator. The practical detail is that this effect depends on setting the image type first and adding your file in Upload Image.

**Q: Where do I change how the image loader looks in WordPress?**
A: The normal and fill states for the image are managed from the Image tab under Style in the Preloader block. That separation matters because it lets you control both how the image appears before loading and how it looks while filling. For setup details, [click here](/docs/preloader-block-settings-overview/) for the feature overview of the Nexter Blocks Preloader block.