---
title: "How to Add Icon Preloader Animation in Elementor?"
url: https://theplusaddons.com/docs/icon-preloader-animation-in-elementor/
date: 2023-04-07
modified: 2026-04-11
author: "Aditya Sharma"
description: "Are you looking to add Icon Preloader Animation in you Elementor website? If you're looking to enhance the user experience on your website, one great way to do so is..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Icon-Preloader-Animation-in-Elementor_-1024x536.jpg
word_count: 210
---

# How to Add Icon Preloader Animation in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes a Preloader widget that allows users to add an icon as a preloader.
- Users can select an icon from the Elementor icon library or upload a custom SVG icon for the Preloader widget.
- The Preloader widget enhances user experience by visually indicating that the page is still loading.

Are you looking to add Icon Preloader Animation in you Elementor website? If you're looking to enhance the user experience on your website, one great way to do so is by adding a preloader animation to your site. It not only adds a visual element to your site but also helps to improve the site's performance by letting visitors know that the page is still loading.

With the Preloader widget from The Plus Addons for Elementor you can easily use an icon as a preloader for 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 **Icon **from the **Select** dropdown.

In the **Icon **field, you can add an icon from the Elementor icon library or you can add a custom SVG icon.

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

You can make the necessary style adjustment from the **Icon** tab under **Style**.

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

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

## Frequently Asked Questions

**Q: What should I do if the icon preloader animation doesn't show up on my Elementor site?**
A: If the icon preloader animation isn't displaying, first ensure that the Preloader widget from The Plus Addons for Elementor is installed and activated. This widget is essential for adding the preloader feature. Additionally, check if you've correctly selected an icon from the dropdown in the Content tab. If you've added a custom SVG icon, verify that the SVG is properly formatted.

**Q: What are the best style adjustments for the icon preloader animation?**
A: For optimal visual impact, adjust the size and color of the icon in the Icon tab under Style. Consider using contrasting colors to ensure the preloader stands out against your website's background. This not only enhances visibility but also improves user experience by clearly indicating that the page is loading.

**Q: How does the icon preloader animation compare to text-based preloaders?**
A: The icon preloader animation offers a more visual approach compared to text-based preloaders. While text preloaders can convey loading status, icon preloaders can be more engaging and visually appealing. For further insights, you can check out the tutorial on [How to Add Text Preloader Animation in Elementor](https://theplusaddons.com/docs/text-based-preloader-animation-in-elementor/).