---
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 includes a Preloader block that allows users to add shortcode-based loading animations to their WordPress site.
- Users can select Shortcode from the Select Type dropdown in the Preloader block to customize their page loading animation.
- Nexter Extension provides shortcodes for templates that can be used in the Preloader block for unique loading experiences.

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/).

## Frequently Asked Questions

**Q: What should I do if my preloader animation isn't displaying?**
A: If your preloader animation isn't showing, ensure that the Preloader block from Nexter Blocks is installed and activated. This block is essential for adding shortcode-based preloaders. Additionally, double-check that you've correctly added your shortcode in the Code field under the Pre Loader tab. If the shortcode is incorrect or the block isn't active, the animation won't appear.

**Q: Does the preloader animation work with other page builders?**
A: The preloader animation is designed to work primarily with Gutenberg, as NexterWP is built with Gutenberg as the main builder. While it also supports Elementor and Bricks, the full functionality of the Preloader block is optimized for Gutenberg. If you're using other builders, ensure compatibility with the shortcode you plan to implement.

**Q: How can I find the shortcode for my template in Nexter Extension?**
A: To find the shortcode for your template in Nexter Extension, navigate to the Theme Builder section. Each template listed there will have its corresponding shortcode displayed beside it. You can then use this shortcode in the Preloader block to incorporate your template content into the page loading animation.