---
title: Preloader
description: "The Preloader shows a loading screen while a page loads, then fades it away. You can use a spinner, dots, a bar, a pulse, or your own logo. [How to Add a Preloader (Loading Screen) to WordPress | ShapeBlock Pro…"
url: "https://shapekode.com/product/shapeblock/docs/preloader/"
updated: "2026-11-04"
category: Pro Extensions
---

# Preloader

The Preloader shows a loading screen while a page loads, then fades it away. You can use a spinner, dots, a bar, a pulse, or your own logo.

[How to Add a Preloader (Loading Screen) to WordPress | ShapeBlock Pro Preloader](https://www.youtube.com/embed/L6pHLAf2TLE?feature=oembed)

## How to Turn On the Preloader

1. In your WordPress dashboard, go to **ShapeBlock > Extensions**.
2. Find the **Preloader** card and turn its switch on. The change is saved right away.
3. Click the gear button on the card to open its settings.
4. Change the settings and click **Save Changes**.

![ShapeBlock Extensions page with the Preloader card](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-preloader-1.webp)

## Preloader Settings

- **Style:** Choose the loader: Spinner, Dotted Circle Spinner, Dots, Bar, Pulse, or Logo.
- **Logo:** With the Logo style, click **Choose Logo** to pick an image from the Media Library. Use **Change Logo** or **Remove** to replace or clear it.
- **Logo Width:** With the Logo style, set the logo width in pixels.
- **Size:** Set the loader size in pixels. With the Logo style this field is called **Ring Size** and sets the ring around the logo.
- **Background:** Set the color or gradient of the loading screen.
- **Color:** Set the color of the spinner, dots, bar, or ring.

### Show On

Every site-wide extension has a **Show On** option at the end of its settings window.

- **All pages:** The extension runs on every page of the site. This is the default.
- **Selected pages:** A second field appears. Pick one or more pages from the list (type to search). The extension then runs only on those pages, and nowhere else. Use it to try a feature on a few pages first, or to keep it to the pages that need it.

**Note:** Selected pages works with pages only. Posts, archives, and search results are not in the list, so a feature limited to selected pages does not run on them.

![Preloader settings window with the Show On option set to Selected pages](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-preloader-2.webp)

Use **Reset to Defaults** to go back to the original settings, or **Cancel** to close the window without saving.