---
title: "How to Add Icon Preloader Animation in WordPress?"
url: https://nexterwp.com/docs/icon-preloader-animation-in-wordpress/
date: 2023-04-10
modified: 2026-04-15
author: "Aditya Sharma"
description: "Adding an icon preloader animation to your WordPress website can be a simple yet effective way to improve the user experience during page loading. An icon preloader animation displays a..."
image: https://nexterwp.com/wp-content/uploads/2024/05/icon-preloader-animation-in-wordpress-1024x519.jpg
word_count: 178
---

# How to Add Icon Preloader Animation in WordPress?

## Key Takeaways

- Nexter Blocks includes a Preloader block that allows users to add an icon as a preloader for their WordPress website.
- The Preloader block requires installation and activation of Nexter Blocks to function properly.
- Users can customize the icon style in the Preloader block under the Icon tab in the Style settings.

Adding an icon preloader animation to your WordPress website can be a simple yet effective way to improve the user experience during page loading. An icon preloader animation displays a small icon or symbol while a website or page loads, indicating to users that the site is actively loading.

With the Preloader block from the Nexter Blocks, you can easily use an icon as a preloader for your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks* Preloader block, [click here](/docs/preloader-block-settings-overview/).

***Requirement - This block is a part of the Nexter Blocks***, make sure its installed & activated to enjoy all its powers.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/)

To do this, add the Preloader block on the page or template, in the **Pre Loader** tab, you’ll find a repeater item under **Layers**.

Open the item and select **Icon** from the **Select Type** dropdown.

From the **Select Icon** field, you can add an icon.

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

From the **Icon** tab under **Style,** you can manage the icon style.

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

Also, check [How to Add Page Loading Transition Effects in WordPress](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/).

## Frequently Asked Questions

**Q: What should I do if the Preloader block is not displaying on my WordPress site?**
A: If the Preloader block isn't showing, ensure that the Nexter Blocks plugin is installed and activated. This block is specifically part of the Nexter Blocks suite, so without it, the preloader functionality won't be available. Additionally, check that you've added the Preloader block correctly on the page or template.

**Q: What are the best practices for using an icon preloader animation in WordPress?**
A: When using an icon preloader animation, keep it simple and relevant to your site's theme. A lightweight icon ensures that the loading experience is smooth and does not hinder performance. Consider using a recognizable icon that aligns with your brand to enhance user experience while waiting for the page to load.

**Q: Does the Preloader block work with other page builders like Elementor?**
A: The Preloader block is designed primarily for use with Gutenberg, as NexterWP is a Gutenberg-first ecosystem. While it may be possible to integrate with other builders, the full functionality and ease of use are optimized for Gutenberg. If you are using Elementor or Bricks, you might not get the same experience.