Skip to content

How to Add Image Preloader Animation in WordPress?

Updated On : September 14, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Pre Loader block is part of Nexter Blocks Pro and is enabled under Nexter > Blocks in the WordPress dashboard.
  • Pre Loader block lets the page show a logo or image as the first thing on screen while loading, and the published page covers the whole screen until loading finishes.
  • Pre Loader block renders the image as a normal , so a small transparent PNG or SVG loads instantly, while a large photo or heavy file defeats the point of the preloader.
Table of Contents

The wait while a page loads is the first thing a visitor sees, and a blank screen wastes it.

The Pre Loader block can fill it with your logo, so the brand is the first thing on screen.

For every Pre Loader setting in one place, see the Pre Loader block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Pro — the Pre Loader block is part of Nexter Blocks Pro.
  • Block to enable: Pre Loader, switched on under Nexter > Blocks in your WordPress dashboard.
  • Your image in the Media Library, ideally a small transparent PNG or SVG so it loads instantly.

Steps

  1. Add the Pre Loader block to the page and click Design from Scratch.
  1. In the Pre Loader panel, click + Add Item and set Select Type to Image.
The Select Type dropdown on a Pre Loader item
  1. Choose your picture under Image as Loader.
A Pre Loader item with Select Type set to Image and the image chosen
  1. Open the Style tab and set the Image width, margin and opacity to taste.
  1. Publish the page and open it in a new tab.

The editor only shows a small static preview of the loader. On the published page it covers the whole screen until loading finishes.

How It Behaves

  • The picture is centred on the overlay and stays there until the page finishes loading.
  • While the page is loading, the block adds tpgb-body-preloader to the page and shows the overlay. Once loading finishes it swaps in tpgb-loaded and the overlay goes away.
  • The image is rendered as a normal <img>, so it must load quickly — a large photo defeats the point of a preloader.
  • Width, border, radius, shadow and opacity for the image all live in the Image panel of the Style tab.

Limitations

  • Pro only.
  • A still image does not animate by itself. Pair it with a text or progress item, or use a Lottie animation, if you want movement.
  • The image is loaded like any other, so a heavy file can be the slowest thing on the page.
  • The editor shows only a static preview of the loader area.

Troubleshooting

The loader area is empty

No image is chosen on the item. Open the item and pick one under Image as Loader.

The logo appears too large or too small

Set Width in the Image panel of the Style tab rather than re-exporting the file.

The logo itself flashes in late

The image is too heavy. Use a small PNG or an SVG so it is ready before the rest of the page.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding an image preloader animation in WordPress?

The Pre Loader block is Pro only, and it has to be switched on under Nexter > Blocks in your WordPress dashboard. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Pre Loader block as part of Nexter Blocks Pro. For the image itself, a small transparent PNG or SVG is the safest choice because it loads quickly and avoids turning the preloader into another slow asset.

How do I add an image preloader animation in WordPress without slowing the page down?

The key is to keep the loader image light. The page says the image is rendered as a normal , so a large photo defeats the point of a preloader and can become the slowest thing on the page. A small transparent PNG or SVG is the better fit because it appears quickly while the rest of the page finishes loading. That matters most when you want the loader to cover the blank screen without adding more delay.

Does an image preloader work with a logo instead of an animated file?

The Pre Loader block can show your logo as the first thing on screen, and that logo sits centered on the overlay until loading finishes. That makes it useful when you want branding rather than motion. The tradeoff is that a still image does not animate by itself, so if you want movement you need to pair it with a text or progress item, or use a Lottie animation instead.

Why does my image preloader area show up empty?

An empty loader area usually means no image was chosen for that item. Open the item and pick one under Image as Loader. That is the only fix needed in this case, because the block expects an actual image asset before it can render anything in the overlay. If you are testing in the editor, remember that it only shows a small static preview there.

How do I resize the logo in an image preloader animation?

Image size is controlled from Width in the Image panel of the Style tab, not by re-exporting the file. That is useful because you can tune how large it feels on screen without changing your source asset. The same panel also handles border, radius, shadow and opacity for the image, so one place controls both scale and presentation.

What is better for movement: an image preloader or a Lottie animation?

A still image is fine for branding, but it does not animate on its own. If motion matters, Lottie is the better fit because this setup treats images like normal files and they stay static while loading. The page also points to related docs for Lottie file preloader animation and Icon preloader animation, which are better matches when you want visible movement instead of a logo-only overlay.

Last reviewed: September 14, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53