Skip to content

How to Add Text Based Preloader Animation in WordPress?

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

Key Takeaways

  • Pre Loader bloquea la pantalla completa en la página publicada hasta que termina la carga, y cambia de tpgb-body-preloader a tpgb-loaded cuando finaliza.
  • Nexter Blocks Pro incluye el bloque Pre Loader, que se activa en Nexter > Blocks y permite elegir Select Type a Text para animar una palabra o frase corta.
  • Texto se renderiza dos veces, como base y como elemento interno, para animar el relleno sin escribir CSS, y el panel Text de la pestaña Style controla padding, background, border y shadow.
Table of Contents

Sometimes the clearest loading screen is one that simply says what is happening.

The Text loader type puts a word or short phrase on the overlay and animates it while the page loads.

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.
  • A short phrase: one or two words read best on a loading screen.

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 Text.
A Pre Loader item with Select Type set to Text
  1. Type the words into the item’s text field.
  1. Open the Style tab and set the Text padding, background and border.
  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

  • Your words are rendered twice — once as the base and once inside an inner element — which is how the block animates the fill without you writing any CSS.
  • Because it is real text, it scales cleanly on every screen and needs nothing downloaded.
  • 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.
  • Padding, background, border and shadow live in the Text panel of the Style tab.

Limitations

  • Pro only.
  • Long sentences do not fit the animation well — keep it to a word or two.
  • The text is duplicated in the markup for the animation, so do not use it for anything a visitor must read only once.
  • The editor shows only a static preview of the loader area.

Troubleshooting

Nothing shows on the overlay

The item’s text field is empty. A Text item with no words renders nothing at all.

The text appears twice

That is how the animation is built — a base copy and an animated copy stacked on top. Only one is visible at a time on the published page.

The words wrap awkwardly

Shorten the phrase, or reduce the font size in the Text panel of the Style tab.

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 a text based preloader animation in WordPress?

The Text loader type is part of the Pre Loader block in Nexter Blocks Pro, so the block has to be enabled under Nexter > Blocks first. The page also says short phrases work best, ideally one or two words, because long text does not fit the animation well. That matters because the effect is built for a loading screen, not a paragraph of copy.

Why is my text based preloader animation not showing on the overlay?

An empty text field renders nothing, so the most common cause is that the item's text field has no words in it. The overlay only appears once the page is actually loading on the published page, while the editor shows just a small static preview. If nothing appears, check that the Text item contains actual text and test it in a new tab after publishing.

Why does the preloader text appear twice?

The text is duplicated on purpose: one copy is the base and the other sits inside an inner element so the block can animate the fill without custom CSS. That means two copies exist in the markup, but only one is visible at a time on the published page. This also explains why it should not be used for anything a visitor must read only once.

What kind of text works best for a loading screen preloader?

One or two words work best. The page calls out that short phrases fit the animation better, while long sentences do not fit well and can wrap awkwardly. For a loading screen, brevity matters because the effect is meant to be read quickly while the page finishes loading, not as a full message.

Does this text based preloader work without custom CSS?

The animation is built into Nexter Blocks Pro, so it does not need custom CSS to create the fill effect. The block handles the duplicated text structure itself, and real text scales cleanly on every screen with nothing downloaded. That makes it a good fit when you want a simple loading message without writing extra styling code.

How do I fix awkward line breaks in a text preloader?

Shorten the phrase or reduce the font size in the Text panel of the Style tab. The page ties awkward wrapping to phrases that are too long for the animation area, so trimming the copy usually solves it faster than changing everything else. Padding, background, border and shadow are also controlled in that same Text panel, which helps keep spacing under control.

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