---
title: "How to Add Preloader & Page Loading Animations with Page Transitions in WordPress (Gutenberg) [Video Tutorial]"
url: https://nexterwp.com/docs/add-preloader-page-loading-animations/
date: 2023-07-05
modified: 2026-04-14
author: "Aditya Sharma"
description: "https://www.youtube.com/watch?v=9NIAO5YVIJU 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..."
image: https://nexterwp.com/wp-content/uploads/2024/05/add-preloader-page-loading-animations-1024x519.jpg
word_count: 157
---

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

## 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.

https://www.youtube.com/watch?v=9NIAO5YVIJU

##### 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/](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/](https://nexterwp.com/)
⚡ Get the Plugin [https://nexterwp.com/nexter-blocks/](https://nexterwp.com/nexter-blocks/)
USE CODE " YOUTUBE10 " TO ENJOY 10% DISCOUNT

## Frequently Asked Questions

**Q: What should I do if the preloader animation isn't displaying on my site?**
A: 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.

**Q: What are the best settings for page transitions to enhance user experience?**
A: 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.

**Q: What happens if I set the load time too high for my preloader?**
A: 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.

**Q: Are there any limitations when using the Nexter Blocks preloader feature?**
A: 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.