---
title: "How To Add a Preloader WordPress?"
url: https://nexterwp.com/docs/add-preloader-in-wordpress/
date: 2023-04-10
modified: 2026-08-12
author: "Aditya Sharma"
description: "Page loading animations give visitors a visual signal that your site is loading rather than frozen. A preloader holds the screen while assets load, replacing a blank or partially rendered..."
image: https://nexterwp.com/wp-content/uploads/2024/05/preloader-block-settings-overview-1024x519.jpg
word_count: 1213
---

# How To Add a Preloader WordPress?

## Key Takeaways

- Nexter Blocks Preloader Block is a Premium block that requires the PRO version of the Nexter Blocks plugin and the default WordPress Block editor to be active.
- Nexter → Blocks lets the user activate the Preloader block by searching for Preloader and turning on the toggle.
- Preloader Block supports Image, Icon, Text, Lottie, Custom Code, Shortcode, Predefined, and Progress preloader types, plus multiple preloaders on one page.
- Load Time lets the user set a Minimum or Maximum time in seconds, and Page Transition adds page loading transition effects.

Page loading animations give visitors a visual signal that your site is loading rather than frozen. A preloader holds the screen while assets load, replacing a blank or partially rendered page with an intentional visual that maintains attention during the loading process.

The Preloader block in Nexter Blocks lets you add page loading animations to any WordPress page or template without custom code. You can choose from images, icons, text, Lottie files, predefined spinners, progress bars, shortcodes, or custom HTML and CSS — and stack multiple layers in a single preloader.

**Best Used For:**

- Agency and portfolio sites that display a branded logo animation while heavy assets load

- WooCommerce stores with large product catalogs where a progress bar preloader sets clear load expectations

- Course and membership sites that add page transition effects between content sections for a polished navigation experience

[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 (Pro)** – Display your logo, brand mark, or any image as the preloader animation. [Learn more](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/). Use this to reinforce brand identity on the loading screen.

- **Icon Preloader (Pro)** – Use any icon from your icon library as the preloader. [Learn more](https://nexterwp.com/docs/icon-preloader-animation-in-wordpress/). Use this for minimal, icon-driven designs that match a clean site aesthetic.

- **Text Preloader (Pro)** – Display a short text string, such as a tagline or loading message, as the preloader. [Learn more](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/). Use this when you want to communicate something specific during the load, such as a brand name or short status message.

- **Lottie Preloader (Pro)** – Use a Lottie JSON file as the preloader animation. [Learn more](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/). Use this for high-quality vector animations that are lightweight and resolution-independent.

- **Custom Preloader (Pro)** – Build a preloader from scratch using custom HTML and CSS. [Learn more](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/). Use this for fully bespoke designs that go beyond the built-in preloader options.

- **Shortcode Preloader (Pro)** – Embed any shortcode output as the preloader. [Learn more](https://nexterwp.com/docs/shortcode-based-preloader-animation-in-wordpress/). Use this when another plugin generates the animation and you want to display it as the loader.

- **Multiple Predefined Loaders (Pro)** – Select from a library of ready-made loading animations. [Learn more](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/). Use this when you need a polished preloader without custom design work.

- **Multiple Preloaders (Pro)** – Stack more than one preloader layer on a single page. Use this to build composite loading screens with multiple animated elements displayed together.

- **Exclude Content (Pro)** – Choose which page elements load before the preloader dismisses. [Learn more](https://nexterwp.com/docs/exclude-content-from-preloader-in-wordpress/). Use this to ensure critical above-the-fold content renders before the animation ends.

- **Page Loading Transition (Pro)** – Add animated transitions between pages as visitors navigate the site. [Learn more](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/). Use this to create a seamless browsing experience that maintains visual continuity across page loads.

- **Set Minimum or Maximum Load Time (Pro)** – Control how long the preloader stays visible, independent of actual page load time. Use Minimum to guarantee the animation completes; use Maximum to prevent the loader from blocking fast-loading pages.

## How to Add the Preloader Block?

To display the preloader across the entire site, add the Preloader block to a common template such as a header or footer. You can create these templates using the free [Nexter Theme](https://nexterwp.com)'s template builder.

To display the preloader on a specific page or post only, add the Preloader block directly to that page or post.

Add the Preloader block to the template or page.

Click the **Design from Scratch** button to build the preloader layout.

![](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.*

In the **Preloader** tab, open the repeater item under **Layers**.

Open the item. From the **Select Type** dropdown, choose the preloader type —

**Image** — Display a custom image, such as your logo or brand mark, as the preloader. [Learn more](https://nexterwp.com/docs/image-preloader-animation-in-wordpress/).

**Icon** — Use an icon from your library as the preloader. [Learn more](https://nexterwp.com/docs/icon-preloader-animation-in-wordpress/).

**Text** — Display a short text string as the preloader, such as a tagline or loading message. [Learn more](https://nexterwp.com/docs/text-based-preloader-animation-in-wordpress/).

**Predefined** — Select from a library of ready-made loading animations. No additional setup is required beyond selecting the style.

**Lottie** — Use a Lottie JSON file as the preloader animation. [Learn more](https://nexterwp.com/docs/lottie-file-preloader-animation-in-wordpress/).

**Custom Code** — Build a preloader using custom HTML and CSS. [Learn more](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/).

**Shortcode** — Embed any shortcode output as the preloader. [Learn more](https://nexterwp.com/docs/shortcode-based-preloader-animation-in-wordpress/).

**Progress** — Display a progress bar animation as the preloader. Select from the available progress bar styles.

Based on your selection, the relevant configuration options appear below the type dropdown.

Click **+ Add Item** to add additional preloader layers to the same page. [Learn the process](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/).

Enable the **Backend Visibility** toggle to preview the preloader in a static state within the editor.

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

### Animated Load First

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

**Load Time** — From this section, set the minimum or maximum display time for the preloader. Three options are available —

**Default** — The preloader stays on screen for the actual page load time and dismisses when the page is ready.

**Minimum** — Set a minimum display time in seconds. The preloader stays visible for at least this duration, even if the page loads faster. Enter the value in the **Time (Second)** field. For example, setting 3 seconds keeps the animation on screen for at least 3 seconds even if the page loads in 2.

**Maximum** — Set a maximum display time in seconds. The preloader dismisses after this duration regardless of whether the page has fully loaded. Enter the value in the **Time (Second)** field. For example, setting 2 seconds hides the animation after 2 seconds even if the page takes 5 seconds to load.

### Page Transition

From this tab, add animated transitions that play as visitors navigate between pages. [Learn the process](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/).

## How to Style the Preloader Block?

The Style tab contains all appearance options for the Preloader block. The available sections change based on the preloader type selected in the Content tab.

**Image** — Control the image width, margin, border, and box shadow. If you are using the **Image as Loader** option, the **Image Loader** section lets you adjust opacity and CSS filters for both the normal and fill states.

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

**Icon** — Control the icon size, padding, margin, color, background, and border.

**Text** — Control the background, padding, margin, and border of the text preloader.

**Predefined** — Adjust the padding and margin of the predefined animation.

**Progress Bar** — Control the progress bar width, height, color, margin, and border.

**Box** — Control the preloader container box width, padding, background, and border. The **Whole Background** section lets you style the full-page background that appears behind the preloader.

Advanced options are available in the **Advanced** tab and are common to all Nexter Blocks.

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