Skip to content

How to Add Icon Preloader Animation in WordPress?

Updated On : September 14, 2026By : Reading Time : 2 minutes

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.
Table of Contents

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.

LIVE BLOCK LINK

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

  1. Add the Pre Loader block to the page and click Design from Scratch.
  1. In the Pre Loader panel, click + Add Item and set Select Type to Icon.
A Pre Loader item with Select Type set to Icon
  1. Pick the icon on the item.
  1. Open the Style tab and set the Icon size, colour, background and padding.
  1. 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

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding an icon preloader animation in WordPress?

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.

How do I add an icon preloader animation in WordPress without using an image?

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.

Why is my icon preloader not showing on the front end?

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.

Why is my preloader icon the wrong colour?

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.

How do I make an icon preloader work better on mobile?

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.

Is an icon preloader a good choice if I want continuous animation?

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.

Last reviewed: September 14, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53