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.
Table of Contents

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.

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

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.

preloader type image new

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.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if my image preloader animation isn't showing up?

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.

Can I use an animated GIF as an image preloader in WordPress?

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.

What settings work best for the image preloader animation?

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.

What happens if I forget to toggle the Image as Loader option?

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.

Is there a way to customize the loading animation further?

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.

Last reviewed: April 15, 2026

Related Docs