---
title: "How to Add Text Based Preloader Animation in WordPress?"
url: https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/
date: 2023-04-10
modified: 2026-08-06
author: "Aditya Sharma"
description: "The Preloader block in Nexter Blocks lets you display a text-based animation while your WordPress page loads. Use it to show loading text with a color-fill effect that progresses as..."
image: https://nexterwp.com/wp-content/uploads/2024/05/text-based-preloader-animation-in-wordpress-1024x519.jpg
word_count: 190
---

# How to Add Text Based Preloader Animation in WordPress?

## Key Takeaways

- Preloader block in Nexter Blocks displays a text-based animation while a WordPress page loads, using a color-fill effect that progresses as the page renders.
- Nexter Blocks Preloader block requires Nexter Blocks to be installed and activated before the block is added to a page or template.
- Text as Loader toggle turns loading text into a loader, and the block adds typography, color, and text loader color options.

The Preloader block in Nexter Blocks lets you display a text-based animation while your WordPress page loads. Use it to show loading text with a color-fill effect that progresses as the page renders.

For the complete feature overview of the Nexter Blocks Preloader block, see the [Preloader block settings overview](https://nexterwp.com/docs/preloader-block-settings-overview/).

**Requirement** – This block is part of Nexter Blocks. Make sure it is installed and activated.

[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 will find a repeater item under **Layers**.

Open the item and select **Text** from the **Select Type** dropdown.

In the **Content** field, you can add your loading text.

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-type-text-new.png)

Then, you can turn your text into a loader from the **Text as Loader** toggle. As the page loads, it will slowly change the text color from one color to another.

You will find options to manage the text typography and color as well.

Once you turn on the **Text as Loader** toggle, you will find an additional color option for the text loader color.

Also, check [How to Add Image Preloader Animation in WordPress](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/).