---
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-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://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

- Nexter Blocks Preloader block lets a WordPress site use an icon as a preloader while a page loads.
- Pre Loader tab includes a repeater item under Layers, where Select Type dropdown changes to Icon and the Select Icon field adds the icon.
- Icon tab under Style manages the icon style for the preloader animation.

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

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