---
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-04-15
author: "Aditya Sharma"
description: "Using shortcodes is a convenient way to add dynamic content to your WordPress website, including preloader animations. With shortcode-based preloader animations, you can easily add engaging and visually appealing loading..."
image: https://nexterwp.com/wp-content/uploads/2024/05/shortcode-based-preloader-animation-in-wordpress-1024x519.jpg
word_count: 252
---

# How to Add Shortcode Based Preloader Animation in WordPress?

## Key Takeaways

- Nexter Blocks Preloader block uses a shortcode in the Code field to show different types of content in the page loading animation.
- Preloader block adds a repeater item under Layers in the Pre Loader tab, where the Select Type dropdown includes Shortcode.
- Nexter Extension Theme Builder shows a shortcode beside each template, and that shortcode works in the Preloader block for page loading animation.

Using shortcodes is a convenient way to add dynamic content to your WordPress website, including preloader animations. With shortcode-based preloader animations, you can easily add engaging and visually appealing loading experiences to your site without having to write complex code.

With the Preloader block from the Nexter Blocks, you can use shortcode to show different types of content in the page loading animation.

*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/?utm_source=tpag&utm_medium=docs&utm_campaign=text)

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 **Shortcode **from the **Select Type** dropdown.

In the **Code** field, add your shortcode.

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-type-short-code-new.png)

For shortcode, you can use any shortcode, such as a custom shortcode or shortcode provided by some plugins.

But if you are using Nexter Extension, you’ll get a shortcode for the templates that you can use in the Preloader block. You can use different WordPress blocks to create a unique template that you can use as a preloader.

To find the templates in Nexter, go to **Nexter Extension** > **Theme Builder**.

Beside each template, you’ll find its shortcode. 

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-nexter-builder-new.png)

Add this shortcode in the Preloader block and it will use your template content for page loading animation. 

Also, check [How to Add Page Loading Transition Effects in WordPress](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/).