---
title: "How To Add a Preloader WordPress?"
url: https://nexterwp.com/docs/add-preloader-in-wordpress/
date: 2023-04-10
modified: 2026-04-15
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?

## Key Takeaways

- Nexter Blocks offers a Preloader Block that allows users to add customizable page loading animations to their WordPress site.
- The Preloader Block includes options for Image, Icon, Text, Lottie, Custom Code, and Shortcode preloaders.
- Users can set a minimum or maximum load time for the preloader, ensuring it displays for a specified duration regardless of actual page load time.
- Nexter Theme's theme builder feature enables users to add the Preloader Block to common templates like Header or Footer.

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/)

## Frequently Asked Questions

**Q: What should I do if the Preloader Block doesn't activate?**
A: If the Preloader Block doesn't activate, ensure that the Nexter Blocks plugin is properly installed and activated. This block is part of the PRO version of Nexter Blocks, so check that you have the correct version. You can verify activation by navigating to Nexter u2192 Blocks and searching for 'Preloader'. If it's not visible, you may need to reinstall or update the plugin.

**Q: What are the best practices for setting a minimum load time for the preloader?**
A: Setting a minimum load time for the preloader can enhance user experience by ensuring that the animation is visible long enough to reassure users that the site is loading. You can set this in the 'Load Time' section of the Preloader settings. For example, if you set a minimum load time of 3 seconds, the preloader will display for at least that duration, even if the page loads faster.

**Q: How do I exclude content that loads before the preloader?**
A: To exclude content that loads before the preloader, you can use the options provided in the Preloader Block settings. This feature allows you to specify which elements should be hidden until the preloader finishes. This is useful for creating a seamless loading experience, ensuring that users don't see incomplete content while waiting for the page to load.

**Q: What types of preloaders can I create with Nexter Blocks?**
A: Nexter Blocks offers various options for creating preloaders, including image, icon, text, Lottie file animations, and custom CSS/HTML preloaders. You can also choose from multiple predefined loading animations. This flexibility allows you to customize the preloader to match your site's branding and improve the loading experience.