How to Add Icon Preloader Animation in WordPress?

Key Takeaways

  • Nexter Blocks includes a Preloader block that allows users to add an icon as a preloader for their WordPress website.
  • The Preloader block requires installation and activation of Nexter Blocks to function properly.
  • Users can customize the icon style in the Preloader block under the Icon tab in the Style settings.
Table of Contents

Adding an icon preloader animation to your WordPress website can be a simple yet effective way to improve the user experience during page loading. An icon preloader animation displays a small icon or symbol while a website or page loads, indicating to users that the site is actively loading.

With the Preloader block from the Nexter Blocks, you can easily use an icon as a preloader for your WordPress website.

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

From the Select Icon field, you can add an icon.

preloader type icon new

From the Icon tab under Style, you can manage the icon style.

preloader icon demo 3

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 the Preloader block is not displaying on my WordPress site?

If the Preloader block isn't showing, ensure that the Nexter Blocks plugin is installed and activated. This block is specifically part of the Nexter Blocks suite, so without it, the preloader functionality won't be available. Additionally, check that you've added the Preloader block correctly on the page or template.

What are the best practices for using an icon preloader animation in WordPress?

When using an icon preloader animation, keep it simple and relevant to your site's theme. A lightweight icon ensures that the loading experience is smooth and does not hinder performance. Consider using a recognizable icon that aligns with your brand to enhance user experience while waiting for the page to load.

Does the Preloader block work with other page builders like Elementor?

The Preloader block is designed primarily for use with Gutenberg, as NexterWP is a Gutenberg-first ecosystem. While it may be possible to integrate with other builders, the full functionality and ease of use are optimized for Gutenberg. If you are using Elementor or Bricks, you might not get the same experience.

Last reviewed: April 15, 2026

Related Docs