---
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-04-15
author: "Aditya Sharma"
description: "Are you interested in showing a Text Based Preloading Animation on your WordPress website? Loading times can be a frustrating experience for website visitors, and providing visual feedback can help..."
image: https://nexterwp.com/wp-content/uploads/2024/05/text-based-preloader-animation-in-wordpress-1024x519.jpg
word_count: 249
---

# How to Add Text Based Preloader Animation in WordPress?

## Key Takeaways

- Nexter Blocks includes a Preloader block that allows users to add text-based loading animations on their WordPress website.
- The Preloader block features a Text as Loader toggle that changes the text color as the page loads.
- Users can customize typography and color options for the loading text within the Preloader block.

Are you interested in showing a Text Based Preloading Animation on your WordPress website? Loading times can be a frustrating experience for website visitors, and providing visual feedback can help reassure them that the site is still loading. One way to do this is by adding a text-based preloader animation to your WordPress website. This type of animation displays a short text message or phrase while a website or page loads.

With the Preloader block from the Nexter Blocks, you can add amazing text based loading animations on your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks* Preloader block, [click here](/docs/preloader-block-settings-overview/).

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

[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’ll 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’ll find options to manage the text typography and color as well. 

Once you turn on the **Text as Loader** toggle, you’ll 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/).

## Frequently Asked Questions

**Q: What should I do if the text-based preloader animation doesn't display on my WordPress site?**
A: If the text-based preloader animation isn't showing, ensure that the Nexter Blocks plugin is installed and activated. This block is essential for adding preloader animations. Additionally, check that you've correctly added the Preloader block to your page and configured the settings in the Pre Loader tab, including the Text as Loader toggle.

**Q: Are there any performance considerations when using a text-based preloader animation?**
A: Using a text-based preloader animation generally has minimal impact on performance since NexterWP products load only 1 CSS and 1 JS file per page. However, ensure that the text is concise to avoid unnecessary delays in loading times, which could frustrate users.

**Q: Does the preloader animation work with other page builders besides Gutenberg?**
A: The preloader animation is primarily designed for use with Gutenberg, as it is a part of the Nexter Blocks ecosystem. While it supports Elementor and Bricks, the best experience and full functionality are achieved using Gutenberg as the primary builder.