--- 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-09-14 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/05/text-based-preloader-animation-in-wordpress-1024x519.jpg word_count: 398 --- # How to Add Text Based Preloader Animation in WordPress? ## 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. 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](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.- **A short phrase:** one or two words read best on a loading screen. ## 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 **Text**. ![A Pre Loader item with Select Type set to Text](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-select-type.webp) - Type the words into the item's text field. - Open the **Style** tab and set the **Text** padding, background and border. - 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 - [Icon preloader animation](https://nexterwp.com/docs/icon-preloader-animation-in-wordpress/)- [Combine several preloader animations](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/)- [Pre Loader block: all settings](https://nexterwp.com/docs/add-preloader-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding a text based preloader animation in WordPress?** A: 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. **Q: Why is my text based preloader animation not showing on the overlay?** A: 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. **Q: Why does the preloader text appear twice?** A: 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. **Q: What kind of text works best for a loading screen preloader?** A: 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. **Q: Does this text based preloader work without custom CSS?** A: 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. **Q: How do I fix awkward line breaks in a text preloader?** A: 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.