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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
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.
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.
