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

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.

Requirement  – This block is a part of the Nexter Blocks, make sure its installed & activated to enjoy all its powers.

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.

preloader type short code new

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. 

preloader nexter builder new

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.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if my preloader animation isn't displaying?

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.

Does the preloader animation work with other page builders?

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.

How can I find the shortcode for my template in Nexter Extension?

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.

Last reviewed: April 15, 2026

Related Docs