---
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
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?

## Key Takeaways

- The Plus Addons for Elementor offers a Preloader widget that adds text loading animations to websites.
- Users can customize the text color transition during loading by toggling the Loader on Text option.
- The Preloader widget requires installation and activation of The Plus Addons for Elementor to function.

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/).

## Frequently Asked Questions

**Q: What if the text preloader animation doesn't show up on my Elementor site?**
A: If the text preloader animation isn't displaying, ensure that the Preloader widget from The Plus Addons for Elementor is correctly installed and activated. This widget is essential for adding the animation. Additionally, verify that you've selected 'Text Content' from the dropdown in the Content tab and entered your loading text in the Content field.

**Q: What are the benefits of using a text-based preloader animation instead of an icon?**
A: Text-based preloader animations can add a unique touch to your website, making it feel more professional. They can effectively communicate loading status to users, especially if the text conveys relevant information or branding. This approach can improve user engagement compared to standard icon loaders.

**Q: Does the text preloader animation work on mobile devices?**
A: The text preloader animation created with The Plus Addons for Elementor is designed to function on mobile devices as well. However, it's essential to test the animation on various screen sizes to ensure it displays correctly and maintains a good user experience across devices.

**Q: Are there any limitations to using the Preloader widget in Elementor?**
A: One limitation of the Preloader widget from The Plus Addons for Elementor is that it is specifically designed for use with Elementor only. It does not work with other page builders like Gutenberg, Beaver Builder, or Divi. Ensure you are using Elementor to take advantage of this feature.

**Q: What settings work best for a text-based preloader animation in Elementor?**
A: For optimal results with a text-based preloader animation, choose contrasting colors for the text to enhance visibility. Additionally, keep the loading text concise and relevant to your site's theme. This approach not only improves aesthetics but also ensures users understand that the page is loading.