How to create a WordPress Preloader with a Smooth Page Transition

Adding Preloaders to your WordPress site can help you get a message early on to your users as your page is loading. Did you know that you could display a smooth page transition and display your content and catch your user’s attention? In this blog post, we will see all 21 available transitions in the MAZ Loader WordPress Preloader plugin as well as a demo for each one.

• How to enable Page Transition
• All available Page Transitions
• Page Transition Demos

How to enable Page Transition

After you have created your Preloader (MAZ Loader > Create New Loader), you should click on the “Appearance” tab and navigate to the setting called “Display Transition“. Once you enable this toggle you will be presented with a dropdown called “Transition Style” as well as a color picker called “Transition Color“.

Setting Name	Description
Transition Style	Select any of 20+ transitions available to apply to your Preloader.
Transition Color	Set the color of the page transition

Below you can see how to enable the Page Transitions.

After enabling Page Transition, you need to select a transition from a list of 20+ available transitions. Below you can find the complete list of transitions:

All available Page Transitions

Page Transition Name
Split Horizontally	Split Vertically
Split Up	Split Down
Slide Left	Slide Right
Shrink	Scale out Bottom Left
Scale out Vertical	Scale out Top
Scale out Left	Scale out Top Right
Scale out Top Left	Scale out Right
Scale out Horizontal	Scale out Bottom Right
Scale out Bottom	Scale out Horizontal Top
Flip out Horizontal Bottom	Flip out Horizontal Left
Flip out Vertical Right

Here is how to select a page transition from your Loader > Appearance tab.

After setting a Page Transition, you should specify the color of the transition, you have either make it blend nicely with your Preloader’s background or make it stand out using a more vibrant color.

You have now successfully added a Page Transition to your WordPress Preloader. You can now preview it by pressing the Run Loader button available on the top right of your page.

Page Transition Demos

In this section, we will be showcasing each Preloader Page Transition in order to see how it would appear on your WordPress site.

Split Horizontally

This page transition consists of a screen that splits from the middle and creates 2 sections that navigate to the left and right side of the page respectively thus revealing your page’s content.

Split Vertically

This page transition consists of a screen that splits from the middle and creates 2 sections that navigate to the top and bottom side of the page respectively thus revealing your page’s content.

Slide Up

This page transition consists of a screen that slides from the bottom to top to reveal the page content.

Slide Down

This page transition consists of a screen that slides from the top to bottom to reveal the page content.

Slide Left

This page transition consists of a screen that slides from the right to left to reveal the page content.

Slide Right

This page transition consists of a screen that slides from the left to right to reveal the page content.

Shrink

This page transition consists of a screen that starts in fullscreen and shrinks in the middle of the page to reveal the page content.

Scale out Bottom Left

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the bottom left side of the page to reveal the page content.

Scale out Vertical

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then animates and repositions itself in the middle of the page by making its height zero to reveal the page content.

Scale out Top

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the top center of the page to reveal the page content.

Scale out Left

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the left center of the page to reveal the page content.

Scale out Top Right

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the top right side of the page to reveal the page content.

Scale out Top Left

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the top left side of the page to reveal the page content.

Scale out Right

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the right center of the page to reveal the page content.

Scale out Horizontal

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then animates and repositions itself in the middle of the page by making its width zero to reveal the page content.

Scale out Bottom Right

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the bottom right of the page to reveal the page content.

Scale out Bottom

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then resizes and repositions itself to the bottom center of the page to reveal the page content.

Flip out Horizontal Top

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the horizontal axis to the top to reveal the page content.

Flip out Horizontal Bottom

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the horizontal axis to the bottom to reveal the page content.

Flip out Vertical Left

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the vertical axis to the left to reveal the page content.

Flip out Vertical Right

This page transition consists of a screen that starts in fullscreen mode, hiding the content of the page then flips on the vertical axis to the right to reveal the page content.