---
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-04-11
lang: en
author: "Aditya Sharma"
description: "Do you want to add Text Preloader Animation to your Elementor website? While icon preloader animations are popular, text-based preloader animations can be equally effective. Page loading animations can add..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Text-Based-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 202
---

# How to Add Text Based Preloader Animation in Elementor?

## 

- Utilizes the Preloader widget from The Plus Addons for Elementor to implement text-based loading animations.
- Enables customization of text color transitions during page loading through the Loader on Text toggle.
- Requires installation and activation of The Plus Addons for Elementor to access the Preloader widget features.

Do you want to add Text Preloader Animation to your Elementor website? While icon preloader animations are popular, text-based preloader animations can be equally effective. Page loading animations can add a touch of professionalism and improve user experience on your website.

With the Preloader widget from The Plus Addons for Elementor, you can add beautiful text loading animation on your Elementor website.

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

***Requirement  - This widget is a part of The Plus Addons for Elementor, 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)

To do this, add the Preloader widget on the page or template, in the **Content** tab, you’ll find an item under **Preloader**.

Open the item and select **Text Content **from the **Select** dropdown.

In the **Content** field, you can add your loading text.

![preloader text](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-text.png)

Then, you can turn your text into a loader from the **Loader on Text** toggle. As the page loads, it will slowly change the text colour from one colour to another.

From the **Text** tab under **Style,** you can manage these two colours.

![preloader text demo](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-text-demo.gif)

Also, check [How to Add Image Preloader Animation in Elementor](https://theplusaddons.com/docs//image-preloader-animation-in-elementor/).