Blog

wordpress preloading plugin

How to add a WordPress Preloader using MAZ Loader

MAZ Loader is a WordPress Preloader plugin that helps you create beautiful Preloaders for your site so you can showcase any content you desire while your site is loading and your visitors are waiting patiently to see your site’s fresh content.

Below you will see simple steps on how to create a Preloader using the best WordPress Preloader Plugin, MAZ Loader.

Getting started on creating a WordPress Preloader using MAZ Loader

After you have installed MAZ Loader, you can navigate to the plugin’s page using the left side navigation bar by clicking on MAZ Loader > Create new Loader

Create new WordPress Preloader - MAZ Loader
Click on MAZ Loader > Create New Loader from menu

Once you click the “Create New Loader” button, you will be redirected to the main MAZ Loader Builder Page where you can start creating your WordPress Preloader.

Empty WordPress Preloader Builder Page

On this page, you start adding content to your Preloader using the + Field button on the top left of the Builder. When you hover over the button, you will see the full list of available Fields that compose a Preloader.

Available Fields

The available fields you can choose from are the following:

  • Text
    • Allows you to add any text to your Preloader
  • Image
    • Gives you the ability to add any Images to your Preloader WordPress
  • Icon
    • You can add any Icons from a pre-defined list of SVG, GIFs or CSS Icons.
  • Progress Bar
    • Add a line that progresses from zero percent (0%) to a hundred percent (100%) as your page keeps loading. Additionally, you may add a text showcasing the percentage of your Preloader WordPress.
  • Percentage Counter
    • Display the progress of your Preloader in the text using a percentage from zero (0%) to a hundred (100%) percent.
  • Custom HTML
    • This field allows you to add any HTML / CSS as well as JavaScript by giving you more flexibility in adding unique content to your Preloader, such as videos and more!

In this example, you will create something rather simple, let’s say a text headline showcasing our Product, followed by our logo and finally a Progress Bar at the top of our WordPress Preloader.

Adding Fields to your Preloader

Let’s start by adding our Text Field that will show our Product name:

WordPress Preloader - MAZ Loader - Text Field
Adding the Text Field

Then we can add the Image Field that will display our logo:

Adding the Image Field

Finally, you can add the Progress Bar assigned to display at the top of the page.

WordPress Preloader - MAZ Loader - Progress Bar Field
Adding the Progress Bar Field

All fields provide you with a lot of customizability that helps you personalize each Preloader to fit your needs and your content.

Next, let’s add a background image to our Preloader, view the Publishing Rules that determine where it will appear and hit Save!

Click on the Appearance Tab (next to the Fields Tab) at the top left of our Builder.

WordPress Preloader - MAZ Loader - Setting Background and colors
Setting Background Image and colors on our fields

At last, let’s review the Publishing Rules, to do so click on the last Tab called Publish Settings.

Reviewing the Publishing Rules, currently set to appear site-wide

Hooray!! You are done! You can now click the Save Loader button to save the Loader and see it live on your site!

Read more on our documentation page to learn more about how to customize MAZ Loader, the best WordPress Preloader Plugin!

Get MAZ Loader from here. Automatically get 20% OFF at checkout.

Want to try the free version first? Click here.

Read more:

Looking to add a Loading Screen to your WordPress website?

Get MAZ Loader and start creating beautiful Preloaders.