---
title: "How To Add a Preloader WordPress?"
url: https://nexterwp.com/docs/add-preloader-in-wordpress/
date: 2023-04-10
modified: 2026-03-31
author: "Aditya Sharma"
description: "Page loading animations can significantly enhance the user experience on your WordPress website by providing visual feedback during loading times. A preloader animation, a small graphic or animation displayed while..."
image: https://nexterwp.com/wp-content/uploads/2024/05/preloader-block-settings-overview-1024x519.jpg
word_count: 1037
---

# How To Add a Preloader WordPress?

Page loading animations can significantly enhance the user experience on your WordPress website by providing visual feedback during loading times. A preloader animation, a small graphic or animation displayed while a website loads, assures visitors that the site is actively loading, rather than frozen or broken.

Custom code or additional plugins are often necessary to add a page loading animation in WordPress. However, the Preloader Block from the Nexter Blocks offers an intuitive and user-friendly solution. It allows you to add beautiful and customizable page loading animations to your WordPress site.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of the Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Preloader block is activated, to verify this visit Nexter → Blocks → and Search for Preloader and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=vT7AL6_barM

## How to Activate the Preloader Block?

Go to 

- **Nexter **→ **Blocks** 

- **Search **for** **the block name** **and** turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-activation-new-1.png)

## Key Features

- **Image Preloader** - You can use an [image as a preloader](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/).

- **Icon Preloader **- You can use an [icon as a preloader](https://nexterwp.com/docs/icon-preloader-animation-in-wordpress/).

- **Text Preloader **- You can use [custom text as a preloader](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/). 

- **Lottie Preloader **- You can use [Lottie file animation as a preloader](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/).

- **Custom Preloader **- You can use [custom CSS and HTML to create a preloader.](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/)

- **Shortcode Preloader **- You can use [shortcode based preloader.](https://nexterwp.com/docs/shortcode-based-preloader-animation-in-wordpress/)

- **Multiple Predefined Loaders** - You can select from [multiple predefined loading animations](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/).

- **Multiple Preloaders** - You can use multiple preloaders on a page together.

- **Exclude Content** - You can easily [exclude content that will load before the preloader](https://nexterwp.com/docs/exclude-content-from-preloader-in-wordpress/). 

- **Page Loading Transition **- You can [add beautiful page transitions](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/).

- **Set Minimum or Maximum Load Time **- You can easily set a minimum or maximum load time for the preloader.

## How to Add the Preloader Block?

If you want to add page loading animation on the entire website, then you should add the Preloader block on common templates like Header or Footer.

You can easily do that with the free[ Nexter Theme](https://nexterwp.com)’s theme builder feature. Where you can create header, footer and other templates.

Otherwise, you can add the Preloader block on individual pages or posts where you want to add the page loading animation.

Add the Preloader block to the template or page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-design-type-1024x192.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

Then in the **PreLoader **tab, you’ll find a repeater item under **Layers**.

Open the item. Under the **Select Type** dropdown, you’ll find multiple options -

**Image **- To create an image preloader. [Learn more](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/).

**Icon **- To create an icon preloader. [Learn more](https://nexterwp.com/docs/icon-preloader-animation-in-wordpress/).

**Text **- To create a text preloader. [Learn more](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/).

**Predefined** - With this, you can select from different predefined loading animations as preloaders.

**Lottie **- To create a Lottie File animation preloader. [Learn more](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/).

**Custom Code **- To create a custom preloader. [Learn more](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/).

**Shortcode **- To create shortcode based preloader. [Learn more](https://nexterwp.com/docs/shortcode-based-preloader-animation-in-wordpress/).

**Progress** - With this, you can select from different progress bar loading animations as a preloader.

Based on your choice, you’ll find relevant options.

You can click on the **+ Add Item** button to add multiple preloaders on the page. [Learn the process](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/).

Then you’ll see a **Backend Visibility** option, turn it on to see the preloader preview in static mode.

> *Note: Preview will not be available for some types of preloader.*

### Animated Load First

From this tab, you can select which elements will load before the preloader. [Learn more](https://nexterwp.com/docs/exclude-content-from-preloader-in-wordpress/).

**Load Time** - From this section, you can set the minimum or maximum load time of the preloader. Here, you’ll find three options -

**Default** - It will keep the load time to the default page load time

**Minimum** - In this option, you can set a minimum time (in seconds) for the loader to show, irrespective of the page load time. You can set the time in the **Time(Second)** field. 

For example, if you set the time to 3 seconds, the page loading animation will show for 3 seconds even if your page takes 2 seconds to load.

**Maximum **- In this option, you can set a maximum time (in seconds) for the loader to show, irrespective of the page load time. You can set the time in the **Time(Second)** field. 

For example, if you set the time to 2 seconds, the page loading animation will show for just 2 seconds even if your page takes 5 seconds to load.

### Page Transition

From this tab, you can add beautiful page loading transition effects. [Learn the process](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/).

## How to Style the Preloader Block?

You’ll find most of the styling options for the Preloader block in the Style tab.

**Image** - If you are using the image preloader, you can style it from this tab. From here, you can manage image width, margin, border and box shadow. If you are using the **Image as Loader** option, then from the **Image Loader** section, you can manage opacity and CSS Filter for both normal and fill states.

![](https://nexterwp.com/wp-content/uploads/2023/04/preloader-style-new.png)

**Icon** - If using an icon as a loader, you can manage the style from this tab. From here, you can manage the icon size, padding, margin, color, background, border etc.

**Text** - If you are using text as a preloader, you can manage the style from this tab. You can manage the background, padding, margin, border etc.

**Predefined** - If you are using any predefined loading animation, then you can manage its padding and margin from here.

**Progress Bar** - This is for the progress type preloader, from here you can manage the progress bar width, height, color, margin, border etc.

**Box** - From this tab, you can manage the preloader container box and page background style. You can manage the preloader container box width, padding, background, border etc. From the **Whole Background** section, you can style the whole page background.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)