Blog

Creating a text-only WordPress Preloader

MAZ Loader gives you the ability to create simple to more complex WordPress Preloaders.

Field Settings Overview

Firstly, you can create a simple WordPress Preloader using one or two fields to present your content to your users on page load or utilize the variety of customizable options within the fields themselves or the general settings that are provided.

Settings for the Text Field.

With that said, in this post, we are going to see how you can create a simple WordPress Preloader that contains a simple text field. We will also show all the available settings for this specific field.

Creating a New WordPress Preloader

To get started, you will need to go to MAZ Loader > Create New Loader.

Hover over “MAZ Loader” and click on “Create New Loader”

Adding a new Text Field

Once you have created your new WordPress Preloader, you will need to add a few fields. On this occasion, you will need to hover over “+ Field” and then click on the “Text” field, as seen below:

Hover over “+ Field” and then click on “Text” Field.

Once you have added the Text field on your Preloader, you will need to start configuring it. You can start off by setting the text of the field, the font size, the background and text color as well as the padding of the text field.

Set the text, font size, colors and padding of the text field.

After that, you can see in the Live Preview, on the right side of the page, the current look of our WordPress Preloader.

How the Preloader will look like after adding values to the field settings as mentioned above.

Similarly, you can add margin to our field which is the outer space of your field that interacts with other fields and lets you have space between the fields. In this case, since we have only one field, there isn’t any point into adding margin to our field.

The final setting that we have on the Text Field is the Animation. This gives us the ability to animate our field once the Preloader appears. The variety of the provided animations will help you create a unique and impressive Preloader.

Adding Animations to the Preloader

On the screenshot below, we can see the animation is set to “Swing”:

Setting the animation for the Text Field.

In conclusion, the way out field will show on the front-end is the following:

Text Animation and final Preloader design.

The animation is provided in the Pro version of MAZ Loader.

Looking to add a Loading Screen to your WordPress website?

Get MAZ Loader and start creating beautiful Preloaders.