---
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-08-26
lang: en
author: "Aditya Sharma"
description: "https://www.youtube.com/watch?v=9NIAO5YVIJU Video Duration: 31 : 50 Video Overview This tutorial covers how to add a preloader and page transition effects in WordPress using the Preloader block in Nexter Blocks. You..."
image: https://nexterwp.com/wp-content/uploads/2024/05/add-preloader-page-loading-animations-1024x519.jpg
word_count: 160
---

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

## Key Takeaways

- Nexter Blocks Preloader block adds page loading animations with an image, GIF, Lottie JSON file, or text without any custom code.
- Preloader block is a code-free alternative to the Preloader Plus Plugin and includes progress bar loading animations.
- Page transitions in Nexter Blocks include Fade, Slide, Duo Move, Triple Swoosh, and Simple, with both In and Out transitions and maximum or minimum load time seconds.

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

##### Video Duration: 31 : 50

## Video Overview

This tutorial covers how to add a preloader and page transition effects in WordPress using the Preloader block in Nexter Blocks. You can add page loading animations with an image, GIF, Lottie JSON file, or text, without any custom code. The Preloader block is a code-free alternative to the 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