How to Add Preloader & Page Loading Animations with Page Transitions in WordPress (Gutenberg) [Video Tutorial]

Updated On : April 14, 2026By : Reading Time : 1 minute

Key Takeaways

  • NexterWP allows users to add page loading animations without coding knowledge using the WordPress Preloader plugin.
  • The plugin features progress bar loading animations and supports multiple animations in a single frame.
  • Users can customize preloaders by uploading any image, adding icons, text, and custom CSS.
Table of Contents

YouTube video

Video Duration: 31 : 50

Video Overview

In this WordPress tutorial, we will see how to add Preloader and Page Transition Effects in Block Builder with Image, GIF, Lottie JSON file, Text etc. Using this WordPress Preloader plugin, you can add any page loading animations without any coding knowledge. The best alternative for Preloader Plus Plugin.

Complete feature-packed loading page animations with progress bars, and combine multiple animations in a single frame with each other.

▶ Live Block Demo – https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/

Exclusive Features
✅ Upload any Image in Preloader
✅ Add Icons, Text, Images, Custom Code CSS, Short code, Predefined
✅ Progress Bar Loading Animations
✅ Exclude Loading on Header, or any Section with Custom Class
✅ Page Transitions like Fade, Slide, Duo Move, Triple Swoosh & Simple
✅ Add both In and Out Page Transitions
✅ Adjust Maximum or Minimum Load Time Seconds

⚡ Plugin Website – https://nexterwp.com/
⚡ Get the Plugin https://nexterwp.com/nexter-blocks/
USE CODE ” YOUTUBE10 ” TO ENJOY 10% DISCOUNT

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
LinkedIn X Website

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

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

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

If the preloader animation isn't showing, check if you've correctly uploaded your image or GIF in the preloader settings. Ensure that the animation is enabled and that you haven't excluded the loading on the header or the section where the preloader should appear. Sometimes, caching plugins can also interfere, so clear your cache if necessary.

What are the best settings for page transitions to enhance user experience?

For optimal user experience, consider using subtle transitions like 'Fade' or 'Slide' as they are less jarring. Adjust the maximum or minimum load time to ensure it feels responsive. Combining multiple animations can also create a smoother visual flow, but avoid overloading the page with too many effects.

What happens if I set the load time too high for my preloader?

Setting the load time too high can lead to a frustrating user experience, as visitors may think the site is unresponsive. It's best to keep the load time to a minimum while ensuring that the preloader has enough time to display the animation effectively. Aim for a balance that keeps users engaged without causing impatience.

Are there any limitations when using the Nexter Blocks preloader feature?

While the Nexter Blocks preloader feature is versatile, it does have limitations such as requiring Gutenberg as the primary builder. Additionally, it may not support complex animations that require extensive coding or external libraries. Always test your animations to ensure they perform well across different devices.

Last reviewed: April 14, 2026

Related Docs

Advance Border Radius for WordPress (Gutenberg) – Custom Border Shape [Video Tutorial]
icon
Advanced Typography Styles for WordPress (Gutenberg) – Rotate, Marquee, Stroke, Vertical, Blend [Video Tutorial]
icon
Carousel Slider Sync Remote for Gutenberg WordPress | Connect with Arrows, Dots, Tabs, Accordion etc [Video Tutorial]
icon
Combined Social Media Feed in WordPress (Gutenberg) – Facebook, Instagram, Twitter, YouTube & Vimeo [Video Tutorial]
icon
Create Dynamic WordPress with Custom Post Loop Skins with ACF & CPT (Gutenberg) [Video Tutorial]
icon
Create Unique Image Accordion Horizontal and Vertical with Gutenberg Blocks [Video Tutorial]
icon
123……8