How to Add Shortcode Based Preloader Animation in WordPress?

Key Takeaways

  • Utilizes the Preloader block from Nexter Blocks to implement shortcode-based preloader animations in WordPress.
  • Requires installation and activation of Nexter Blocks to access the Preloader block features.
  • Enables use of custom shortcodes or those provided by plugins to create unique loading animations.
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.

How to Add Shortcode Based Preloader Animation in WordPress?

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. 

How to Add Shortcode Based Preloader Animation in WordPress?

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 Nexter
CMO at POSIMYTH Innovations · Nexter · 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!