--- 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-09-14 lang: en author: "Aditya Sharma" description: "A loading screen needs something on it, but not every site wants to put its logo there. A font icon is the lightest option the Pre Loader block offers —..." image: https://nexterwp.com/wp-content/uploads/2024/05/icon-preloader-animation-in-wordpress-1024x519.jpg word_count: 404 --- # How to Add Icon Preloader Animation in WordPress? ## Key Takeaways - Pre Loader block Pro aparece en Nexter Blocks Pro y se activa en Nexter > Blocks; el artículo indica que el bloque Pre Loader forma parte de la edición Pro. - Icono de fuente se presenta como la opción más ligera del Pre Loader block porque no descarga nada extra y toma los colores configurados, mientras el overlay cubre toda la pantalla hasta que termina la carga. - Limitaciones del Pre Loader: el icono no gira por sí solo, no tiene significado para lectores de pantalla y el editor solo muestra una vista previa estática; para movimiento continuo, el post recomienda un Predefined item o combinarlo con un progress item. A loading screen needs something on it, but not every site wants to put its logo there. A font icon is the lightest option the Pre Loader block offers — nothing extra to download, and it takes your colours. *For every Pre Loader setting in one place, see the [Pre Loader block guide](https://nexterwp.com/docs/add-preloader-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/) ## Before You Start - **Edition:** **Pro** — the Pre Loader block is part of Nexter Blocks Pro.- **Block to enable:** Pre Loader, switched on under **Nexter > Blocks** in your WordPress dashboard.- **An icon in mind:** a spinner or circle reads as loading more clearly than a decorative icon. ## Steps - Add the **Pre Loader** block to the page and click **Design from Scratch**. - In the **Pre Loader** panel, click **+ Add Item** and set **Select Type** to **Icon**. ![A Pre Loader item with Select Type set to Icon](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-icon.webp) - Pick the icon on the item. - Open the **Style** tab and set the **Icon** size, colour, background and padding. - Publish the page and open it in a new tab. > *The editor only shows a small static preview of the loader. On the published page it covers the whole screen until loading finishes.* ## How It Behaves - The icon is rendered as an icon font element, so it is drawn as text and needs no extra image download.- It takes whatever colour you set, so it can match the brand exactly.- While the page is loading, the block adds `tpgb-body-preloader` to the page and shows the overlay. Once loading finishes it swaps in `tpgb-loaded` and the overlay goes away.- Size, colour, background, border and shadow all live in the **Icon** panel of the **Style** tab. ## Limitations - **Pro only.**- The icon does not spin on its own. Choose a **Predefined** item or pair it with a progress item if you want continuous movement.- Icons carry no meaning for screen readers here, so do not rely on one to explain what is happening.- The editor shows only a static preview of the loader area. ## Troubleshooting ### No icon appears The item has no icon selected. Open it and choose one, then check the icon library is loading on the front end. ### The icon is the wrong colour Set **Color** in the **Icon** panel of the **Style** tab — the icon inherits nothing from the page while the overlay is up. ### The icon looks tiny on mobile **Size** in the **Icon** panel is set per device, so raise it for the mobile view. ## Related Docs - [Image preloader animation](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/)- [Text based preloader animation](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/)- [Pre Loader block: all settings](https://nexterwp.com/docs/add-preloader-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before adding an icon preloader animation in WordPress?** A: Nexter Blocks Pro is required, because the Pre Loader block is part of Nexter Blocks Pro. The block also has to be switched on under Nexter > Blocks in your WordPress dashboard. For the cleanest result, pick a spinner or circle icon, since those read as loading more clearly than a decorative icon. That matters because the page is trying to communicate loading state fast, not just show decoration. **Q: How do I add an icon preloader animation in WordPress without using an image?** A: The icon version uses a font icon element, so it is drawn as text and needs no extra image download. In the Pre Loader block, add an item, set Select Type to Icon, choose the icon, then adjust size and colour in the Style tab. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter offers this as the lightest Pre Loader option. **Q: Why is my icon preloader not showing on the front end?** A: The most common cause is that no icon was selected for the item. Open the item and choose one first, then check that the icon library is loading on the front end. The editor only shows a small static preview, so a weak preview there does not mean the live loader is broken. On the published page, it should cover the whole screen until loading finishes. **Q: Why is my preloader icon the wrong colour?** A: The colour comes from the Icon panel in the Style tab, because the icon inherits nothing from the page while the overlay is up. Set Color there instead of expecting it to pick up surrounding styles. That detail matters when you want brand-matched loading states, since this block takes whatever colour you set and can match your brand exactly. **Q: How do I make an icon preloader work better on mobile?** A: Icon size is set per device in the Icon panel, so mobile often needs its own larger value. If it looks tiny on phones, raise the mobile size rather than changing only desktop settings. The same panel also controls background, border and shadow, so mobile tuning usually works best when you review all of those together instead of only one value. **Q: Is an icon preloader a good choice if I want continuous animation?** A: An icon by itself does not spin on its own. If you want continuous movement, choose a Predefined item or pair it with a progress item instead. That makes icons better for simple loading states than for motion-heavy loaders. The editor preview stays static too, so judge motion from how it behaves on the published page rather than from the canvas preview.