---
title: "How To Add a Preloader WordPress?"
url: https://nexterwp.com/docs/add-preloader-in-wordpress/
date: 2023-04-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A page that renders in pieces looks broken, even when it is loading perfectly normally. The Pre Loader block covers the page with a loading animation of your choice and..."
image: https://nexterwp.com/wp-content/uploads/2024/05/preloader-block-settings-overview-1024x519.jpg
word_count: 537
---

# How To Add a Preloader WordPress?

## Key Takeaways

- Pre Loader es un bloque de Nexter Blocks Pro que cubre la página con una animación de carga y la limpia cuando la página está lista.
- Pre Loader admite ocho tipos de cargador, incluidos Image, Icon, Text, Predefined, Lottie, Custom Code, Shortcode y Progress, con seis diseños de barra de progreso.
- Page Transition y Animated Load First controlan la animación de entrada de la página y qué contenido aparece primero, mientras Load Time fija un mínimo o un máximo de tiempo para el cargador.

A page that renders in pieces looks broken, even when it is loading perfectly normally.

The Pre Loader block covers the page with a loading animation of your choice and clears it the moment the page is ready.

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

## 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.- **Somewhere to put it:** add the block to the template or page you want the loader on.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=vT7AL6_barM

## Steps

- Add the **Pre Loader** block to the page and click **Design from Scratch**.

- In the **Pre Loader** panel, click **+ Add Item** and set **Select Type** to **Image**.

![The Select Type dropdown on a Pre Loader item](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-select-type.webp)

- Fill in the field that appears for that type — an image, an icon, some text, a Lottie file and so on.

- Open **Page Transition** if you want the page to animate in as the loader clears.

![The Page Transition panel with the Transition dropdown](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-transition.webp)

- Publish the page and load it in a new tab to see the loader.

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

## The Eight Loader Types

| Select Type | What you supply | Guide |
| ----------- | --------------- | ----- |
| Image | A picture, usually your logo | [Image preloader](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/) |
| Icon | A font icon | [Icon preloader](https://nexterwp.com/docs/icon-preloader-animation-in-wordpress/) |
| Text | A short word or phrase | [Text preloader](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/) |
| Predefined | One of the block's built-in CSS animations | — |
| Lottie | A Lottie JSON animation | [Lottie preloader](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/) |
| Custom Code | Your own markup | [Custom CSS preloader](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/) |
| Shortcode | A shortcode your site provides | [Shortcode preloader](https://nexterwp.com/docs/shortcode-based-preloader-animation-in-wordpress/) |
| Progress | One of six progress bar layouts | — |

## What Each Panel Controls

| Panel | What you set there |
| ----- | ------------------ |
| Pre Loader | The loader items themselves, and Backend Visibility for the editor preview |
| Animated Load First | Content that should appear immediately, and how long the loader stays |
| Page Transition | How the page animates in, and whether it animates out again |

## How It Behaves

- 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 loader is a list, so you can show more than one thing at once — see [combining animations](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/).- **Load Time** lets you keep the loader on screen for at least a set time, or cut it off after a maximum, instead of tracking the real load exactly.- **Animated Load First** lets chosen elements skip the wait — see [excluding content](https://nexterwp.com/docs/exclude-content-from-preloader-in-wordpress/).

## Limitations

- **Pro only.**- The editor shows a static preview area, not the full-screen overlay, so the real effect has to be checked on the published page.- A preloader hides your content until it clears, so a long minimum time works against the visitor and against how quickly your page appears to load.- The loader covers the page it is on — put the block in a template if you want it site wide.

## Troubleshooting

### Nothing happens on the page

Check the block actually has a loader item. An empty **Pre Loader** list renders the overlay with nothing in it, which looks like no preloader at all.

### I only see a small box in the editor

That is the static preview. Use **Backend Visibility** to hide it while you work, and view the published page to see the real overlay.

### The block is missing from the inserter

Switch **Pre Loader** on under **Nexter > Blocks** in your dashboard.

![Pre Loader switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-admin-enable.webp)

## Related Docs

- [Image preloader animation](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/)- [Page loading transition effects](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/)- [Combine several preloader animations](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding a WordPress preloader block in Nexter Blocks Pro?**
A: Nexter Blocks Pro includes the Pre Loader block, and it has to be switched on under Nexter > Blocks in your WordPress dashboard before it appears. The block also needs a place to live, so add it to the page or template you want the loader on. That matters because the loader only covers the page it is placed on, which is why site-wide use belongs in a template.

**Q: Why does the preloader only show as a small box in the editor?**
A: That small box is the static editor preview, not the real overlay. Nexter Blocks Pro shows a compact preview area in the editor, while the published page gets the full-screen loader until loading finishes. Backend Visibility exists for this exact workflow, so you can hide the preview while working and judge the actual effect on the live page.

**Q: How do I fix a WordPress preloader block that shows nothing on the page?**
A: An empty Pre Loader list can make it look like nothing happened, because the overlay renders without any loader item inside it. The block needs at least one item added with + Add Item and a selected type such as Image, Icon, Text, Lottie, Custom Code, Shortcode, or Progress. If there is no item in the list, there is nothing visible for visitors to see.

**Q: Can I use one preloader animation or combine several in Nexter Blocks?**
A: The Pre Loader block is a list, so it can show more than one thing at once. That is useful when one animation feels too plain or when you want a logo plus another visual cue during load. Nexter also has [combining animations](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/), which fits this setup when you want layered loading effects instead of a single element.

**Q: What are the different WordPress preloader block types available?**
A: Nexter Blocks Pro offers eight loader types: Image, Icon, Text, Predefined, Lottie, Custom Code, Shortcode, and Progress. Each type expects a different input, like an image for Image preloader or a shortcode for Shortcode preloader. That choice matters because it determines both what you supply and how much control you have over the loading animation.

**Q: What are the main limitations of using a page preloader in WordPress?**
A: The biggest limitation is that a preloader hides content until it clears, so a long minimum Load Time can make the page feel slower even if it loads quickly. The editor also only shows a static preview instead of the full-screen overlay, so you have to judge behavior on the published page. Since the loader covers only the page it is on, site-wide use belongs in a template.