---
title: "How to Add Icon Preloader Animation in WordPress?"
url: https://qa.nexterwp.com/docs/icon-preloader-animation-in-wordpress/
date: 2023-04-10
modified: 2026-05-28
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://qa.nexterwp.com/wp-content/uploads/2024/05/icon-preloader-animation-in-wordpress-1024x519.jpg
word_count: 194
---

# How to Add Icon Preloader Animation in WordPress?

## Key Takeaways

- Utilize the Preloader block from Nexter Blocks to implement an icon preloader animation in WordPress.
- Select an icon from the Select Icon field in the Pre Loader tab to customize the preloader appearance.
- Manage icon styles through the Icon tab under Style for enhanced visual effects during page loading.

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://qa.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://qa.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://qa.nexterwp.com/wp-content/uploads/2023/04/preloader-icon-demo-3.png)

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

Also, check the [Icon block](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-icon/) for adding decorative icons to your page outside of preloader animations.