---
title: "How to Add Shortcode Based Preloader Animation in WordPress?"
url: https://nexterwp.com/docs/shortcode-based-preloader-animation-in-wordpress/
date: 2023-04-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Plenty of sites already have the animation they want, wrapped in a shortcode from another plugin. The Shortcode loader type runs that shortcode on the loading overlay instead of making..."
image: https://nexterwp.com/wp-content/uploads/2024/05/shortcode-based-preloader-animation-in-wordpress-1024x519.jpg
word_count: 427
---

# How to Add Shortcode Based Preloader Animation in WordPress?

## Key Takeaways

- Pre Loader block in Nexter Blocks Pro runs a shortcode on the loading overlay instead of rebuilding the animation, and the block is enabled under Nexter > Blocks in the WordPress dashboard.
- Shortcode output appears inside a tpgb-preloader-custom-shortcode wrapper, while the page gets tpgb-body-preloader during loading and tpgb-loaded after loading finishes.
- Unknown shortcodes print as plain text, shortcodes that depend on the page or post may not behave as expected, and shortcodes that load their own scripts can slow the loading screen.

Plenty of sites already have the animation they want, wrapped in a shortcode from another plugin.

The Shortcode loader type runs that shortcode on the loading overlay instead of making you rebuild it.

*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.- **A shortcode your site really provides:** from a plugin, your theme or your own code — and check what it outputs before using it here.

## 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 **Shortcode**.

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

- Type the shortcode into the field, in full and with its brackets.

- Publish the page and open it in a new tab to check what the shortcode renders.

> *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 shortcode is run and its output placed inside a `tpgb-preloader-custom-shortcode` wrapper on the overlay.- Whatever the shortcode normally outputs is what appears — the block adds no styling of its own.- 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.- Because the shortcode runs while the page is still loading, keep it to something light that does not need to fetch anything.

## Limitations

- **Pro only.**- **The shortcode must actually be registered on your site.** An unknown shortcode is printed as plain text, so visitors briefly see the bracketed code itself on the loading screen.- Shortcodes that depend on the page or post they sit in may not behave as expected on an overlay.- A shortcode that loads its own scripts can make the loading screen slower than the page behind it.

## Troubleshooting

### The loading screen shows the shortcode text itself

That shortcode is not registered on this site. Check the spelling, and check the plugin or theme that provides it is active.

### Nothing shows at all

The shortcode ran but returned nothing. Try it in a normal page first to confirm what it outputs.

### It looks unstyled

The shortcode's own CSS may only load on pages where it normally appears. Use [Custom Code](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/) instead if you cannot get its styles to load here.

## Related Docs

- [Custom CSS preloader animations](https://nexterwp.com/docs/custom-css-preloader-animations-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/)