---
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 includes a Preloader block that allows users to add an image as a preloader for their WordPress website.
- The Preloader block features an Image as Loader toggle that fills the image slowly as the page loads.
- Users can manage the image's normal and fill states from the Image tab under Style.

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: What should I do if my image preloader animation isn't showing up?**
A: If your image preloader animation isn't displaying, first ensure that the Preloader block from Nexter Blocks is installed and activated. Check the settings in the Pre Loader tab to confirm that you've selected an image in the Upload Image field and toggled the Image as Loader option on. If the image is still not visible, verify that the image file is supported and properly uploaded.

**Q: Can I use an animated GIF as an image preloader in WordPress?**
A: Using an animated GIF as an image preloader is possible, as the Preloader block allows you to upload any image type. This can enhance user engagement during loading times. Just ensure that the GIF is optimized for web use to avoid slowing down your page load speed.

**Q: What settings work best for the image preloader animation?**
A: For optimal performance, use a small image file for your preloader to minimize loading time. In the Image tab under Style, you can manage the normal and fill states of the image. Adjust these settings to create a smooth loading experience that matches your site's design. Consider testing different images to see which one engages users best.

**Q: What happens if I forget to toggle the Image as Loader option?**
A: If you forget to toggle the Image as Loader option, your selected image will not function as a preloader. Instead, the page will load without any animation, potentially leading to a less engaging user experience. Always double-check this setting to ensure your preloader works as intended.

**Q: Is there a way to customize the loading animation further?**
A: While the Preloader block primarily focuses on displaying an image, you can customize the image's normal and fill states in the Image tab under Style. For additional customization, consider combining it with other blocks from Nexter Blocks to create a more dynamic loading experience.