---
title: "How to Add Custom CSS Preloader Animations in WordPress?"
url: https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/
date: 2023-04-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Sometimes the spinner you want is one you already have, from a CSS pen or a design system. The Custom Code loader type drops your own markup onto the overlay..."
image: https://nexterwp.com/wp-content/uploads/2024/05/custom-css-preloader-animations-in-wordpress-1024x519.jpg
word_count: 435
---

# How to Add Custom CSS Preloader Animations in WordPress?

## Key Takeaways

- Pre Loader block de Nexter Blocks Pro usa Custom Code para insertar el marcado propio en la superposición y deja todo el estilo al CSS del sitio, con el HTML dentro del bloque y el CSS donde normalmente se añade CSS personalizado.
- Nexter > Blocks activa Pre Loader en el panel de WordPress, y el flujo pide añadir el bloque, elegir Design from Scratch, pulsar + Add Item, seleccionar Custom Code, pegar el HTML y publicar la página.
- Pre Loader muestra la superposición a pantalla completa mientras carga, añade tpgb-body-preloader durante la carga y cambia a tpgb-loaded al terminar; si el CSS llega tarde o falta ancho y alto explícitos, el loader aparece invisible o sin estilo.

Sometimes the spinner you want is one you already have, from a CSS pen or a design system.

The Custom Code loader type drops your own markup onto the overlay and leaves the styling to you.

*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.- **Your markup and CSS ready:** the HTML goes in the block, the CSS goes wherever you normally add custom CSS.

## 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 **Custom Code**.

![A Pre Loader item with Select Type set to Custom Code](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-custom.webp)

- Paste your HTML into the code field — usually a wrapper with a class of your own, such as `<div></div>`.

- Add the matching CSS to your site, targeting that class.

- 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

- Your markup is output inside a `tpgb-preloader-custom` wrapper, exactly as you wrote it.- Because the block does not style it, your CSS has full control — and is entirely responsible for it looking right.- Target your own class rather than the block's wrapper, so a plugin update cannot change what your CSS matches.- 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.

## Limitations

- **Pro only.**- The CSS is not stored with the block. If it lives in a theme's custom CSS, switching themes loses it.- Any CSS needed for the loader must arrive before the loader is shown, or the first render will be unstyled.- Markup goes in as written, so a typo here breaks the overlay rather than being cleaned up for you.

## Troubleshooting

### The loader is invisible

The markup is probably there but unstyled and zero sized. Give your element an explicit width and height in your CSS.

### My CSS does not apply

Check the class in the block matches the selector in your CSS, and that the stylesheet loads on the front end rather than only in the editor.

### It flashes unstyled for a moment

The CSS is arriving after the loader. Move it somewhere loaded earlier, or use a [Lottie animation](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/) which carries its own appearance.

## Related Docs

- [Shortcode based preloader animation](https://nexterwp.com/docs/shortcode-based-preloader-animation-in-wordpress/)- [Lottie file preloader animation](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/)- [Pre Loader block: all settings](https://nexterwp.com/docs/add-preloader-in-wordpress/)