---
title: "How to Add Text Based Preloader Animation in Elementor?"
url: https://theplusaddons.com/docs/text-based-preloader-animation-in-elementor/
date: 2023-04-07
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "A text preloader puts a word such as Loading in the middle of the screen while the page loads. It needs no image and no icon library. The Pre Loader..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Text-Based-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 802
---

# How to Add Text Based Preloader Animation in Elementor?

## 

- The Pre Loader widget from The Plus Addons for Elementor Pro shows a text word such as Loading in the middle of the screen while the page loads, with no image and no icon library.
- The Plus Addons for Elementor requires the site-wide Pre Loader setting to be set to Entire Site under ThePlus Addons > Extra Options > Settings, or nothing appears on the front end.
- Loader on Text draws the word twice as a base copy and a clipped fill copy, and the fill widens from left to right as the real page load time progresses.
- Style > Text > Text Loader > Color controls the fill color, while Extra Option > Load Time > Minimum with a Time (Second) value stretches the animation when the fill ends too quickly.

A text preloader puts a word such as *Loading* in the middle of the screen while the page loads. It needs no image and no icon library.

The **Pre Loader** widget from The Plus Addons for Elementor can show that word on its own, or fill its colour from left to right as the page arrives.

*To check the complete feature overview documentation of The Plus Addons for Elementor Pre Loader widget, [click here](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/preloader-and-page-transition/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the **Pre Loader** widget ships only in The Plus Addons for Elementor Pro. The free plugin does not contain it.- **Widget to enable:** **Pre Loader**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on.- **Site-wide switch:** go to **ThePlus Addons > Extra Options > Settings**, open the **Design** tab, click the gear on the **Pre Loader** card and set **Pre Loader** to **Entire Site**, then **Save**. Until this is set, the preloader's CSS and JavaScript are never loaded on the front end and nothing appears.- **Where the settings are:** select the **Pre Loader** widget and use the **Content** tab's four sections — **Content**, **Load First**, **Page Transition** and **Extra Option** — plus the **Style** tab.

## Add a Text Preloader

- Add the **Pre Loader** widget to the page or to a header or footer template.- On the **Content** tab, open the item in the **Preloader** list.- Set **Select** to **Text Content**.- Type your word in the **Content** field. It starts on **Loading…**.- Set the type on the **Style** tab under **Text**, then update the page.

![The Pre Loader widget in the Elementor editor with the Preloader item open and the Select dropdown showing the preloader types](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-content.webp)

## Fill the Text as the Page Loads

- Switch on **Loader on Text** in the same item.- Go to **Style > Text** and set **Color** — this is the colour of the word before it is filled.- Still under **Style > Text**, open **Text Loader** and set its **Color** — this is the fill colour. Set it to something that stands out; see the note below.- Update the page and open it.

On our test page the filled part of a 91 px word measured 2 px just after the page opened, 24 px two seconds later and 72 px at four seconds.

> ***Set the Text Loader colour.** With nothing set, the fill colour computes to white. On the default white preloader background that makes the fill invisible, and the word simply looks as if it is disappearing. In our test, setting it to a warm yellow made the fill show; the base **Color** above it, however, stayed white — see Limitations.*

![A text preloader filling its colour while an Elementor page loads](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-text-demo.gif)

## Style It

| Setting | What it does | Where |
| ------- | ------------ | ----- |
| **Typography** | Font, size and weight of the word | **Style > Text** |
| **Color** | The base colour of the word | **Style > Text** |
| **Text Loader > Color** | The fill colour | **Style > Text** |
| **Padding**, **Margin**, **Border**, **Border Radius** | Space and frame around the word | **Style > Text** |
| **Whole Background** | Meant to set the colour behind the preloader. It had no effect in our test — see Limitations. | **Style > Box** |

## How It Behaves

- With **Loader on Text** off, the word is shown once and does not move.- With it on, the word is drawn twice — a base copy and a clipped fill copy on top — and the fill widens as the page loads. The word appears twice in the page's text for that reason.- The fill is timed from the real page load time, so it completes when the page does. **Extra Option > Load Time > Minimum** stretches it.- The text is plain text; HTML in the **Content** field is escaped, not rendered.

## Limitations

- The fill colour has no usable default — it is white until you set it.- **Style > Text > Color**, the base colour, did not change the word in our test: the widget's own stylesheet is loaded after Elementor's and keeps the word white. The **Text Loader** colour is not affected and does work.- **Style > Box > Whole Background** also had no effect: the loading screen stayed white.- There is no per-letter or typewriter animation for this type; the fill is a single left-to-right wipe.- Nothing appears on the front end until the site-wide **Pre Loader** setting is on.

## Troubleshooting

### The word fades out instead of filling

The fill is white on a white background. Set **Style > Text > Text Loader > Color**.

### The word is shown twice

That is the fill copy. It is stacked exactly on top of the base copy, so it only looks doubled if the preloader's own CSS has not loaded — check the site-wide **Pre Loader** setting.

### The fill is over before I can see it

Set **Extra Option > Load Time** to **Minimum** and give it a **Time (Second)** value.

## Related Docs

- [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Icon Preloader Animation in Elementor?](https://theplusaddons.com/docs/icon-preloader-animation-in-elementor/)- [How to Add Image Preloader Animation in Elementor?](https://theplusaddons.com/docs/image-preloader-animation-in-elementor/)- [How to Combine Multiple Preloaders Animations on a Page in Elementor?](https://theplusaddons.com/docs/multiple-preloaders-animations-in-elementor/)

## Frequently Asked Questions

**Q: Why does the text preloader not appear on my site?**
A: The usual cause is that the site-wide Pre Loader switch is still off. The Pre Loader widget from The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH only loads its CSS and JavaScript on the front end after you set Pre Loader to Entire Site under ThePlus Addons > Extra Options > Settings. Until that happens, nothing shows even if the widget is placed on the page.

**Q: How do I make the loading word fill from left to right instead of just sitting there?**
A: The left-to-right fill comes from turning on Loader on Text for the same item. That creates two layers: a base word and a clipped fill copy on top, so the effect reads as progress instead of a static label. The fill timing is tied to the real page load, which is why it finishes when the page does unless you stretch it with Extra Option > Load Time > Minimum.

**Q: Why does the text fade out instead of filling during page load?**
A: That usually means the fill color is white on a white background. In this setup, Style > Text > Text Loader > Color controls the fill color, and it needs contrast or the animation looks like the word is disappearing. A warmer yellow worked in the test example because it made the fill visible while the base word stayed white.

**Q: What should I change if the preloader text shows up twice?**
A: The doubled look is part of how Loader on Text works. The widget draws a base copy and a clipped fill copy directly on top of it, so two text layers are expected. If it looks wrong rather than intentional, the likely issue is that the preloader’s own CSS has not loaded yet, which points back to the site-wide Pre Loader setting being off.

**Q: Can I use HTML or per-letter animation in this text preloader?**
A: This text preloader uses plain text only. HTML in the Content field is escaped instead of rendered, so it will not behave like formatted markup. It also does not support per-letter or typewriter-style motion. The animation is a single left-to-right wipe, which keeps it simple but limits how decorative it can get.

**Q: What is the best way to make sure the loading animation lasts long enough to notice?**
A: Extra Option > Load Time > Minimum is the control that stretches the animation when your page loads too fast. That matters because this effect is timed from real page load time, so a quick page can make the fill finish before anyone notices it. Setting a Time (Second) value gives the wipe enough runway to be visible.