---
title: "How to Combine Multiple Preloader Animations on a Page in WordPress?"
url: https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/
date: 2023-04-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A logo alone says who you are but not that anything is happening; a bare spinner says the opposite. The Pre Loader block's loader list takes several items at once,..."
image: https://nexterwp.com/wp-content/uploads/2024/05/multiple-preloader-animations-in-wordpress-1024x519.jpg
word_count: 457
---

# How to Combine Multiple Preloader Animations on a Page in WordPress?

## Key Takeaways

- Nexter Blocks Preloader block adds multiple preloaders together on a single page to create a unique loading animation.
- Pre Loader tab includes a repeater item under Layers, where the user opens an item and selects an option from the Select Type dropdown.
- +Add Item button adds an additional preloader, and the same steps repeat to combine multiple loaders on a page.

A logo alone says who you are but not that anything is happening; a bare spinner says the opposite.

The Pre Loader block's loader list takes several items at once, so you can show both.

*For every Pre Loader setting in one place, see the [Pre Loader block guide](https://nexterwp.com/docs/add-preloader-in-wordpress/).*

[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.- **The pieces decided:** usually a logo, a short word and something that moves.

## 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 Pre Loader panel with three loader items added](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-multiple.webp)

- Click **+ Add Item** again and set the second item's **Select Type** to **Text**, then type your word.

- Add a third item and set it to **Progress**, choosing one of the progress layouts.

- Drag the items to change the order they appear in, then publish.

> *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

- Every item in the list renders together inside the same loader area — a run with Image, Text and Progress produced all three on one overlay.- Items appear in the order they sit in the panel, so drag them to rearrange.- Each item keeps its own settings and its own section in the **Style** tab, so the image size and the text styling stay independent.- 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.

## A Combination That Works

| Item | Type | Why |
| ---- | ---- | --- |
| 1 | Image | Your logo, so the brand lands first |
| 2 | Text | A single word such as *Loading* to say what is happening |
| 3 | Progress | Movement, so the screen never looks frozen |

## Limitations

- **Pro only.**- The items stack in one area rather than being positioned independently, so three or more can crowd a phone screen.- Every item still has to load. Combining a heavy image with a Lottie file makes the loading screen itself the slow part.- There is no way to show one item and then another in sequence — they all appear at once.

## Troubleshooting

### Only one loader shows

Check each item really has its content filled in. An item with an empty field renders nothing, so it looks like it was ignored.

### They overlap awkwardly

Use the margin settings in each item's section of the **Style** tab to space them, or drop one of the items.

### The order is wrong

Drag the items in the **Pre Loader** panel. They render top to bottom in list order.

## Related Docs

- [Image preloader animation](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/)- [Text based preloader animation](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/)- [Pre Loader block: all settings](https://nexterwp.com/docs/add-preloader-in-wordpress/)