Kiln for Bricks Buy Kiln

Modules / Site & media

Site: page loader

Page loader

Cover the page with a spinner, a progress bar or your logo until it has loaded, then fade it out. You set it up once for the whole site.

  • 856 votes on the Bricks ideas board for Loader Element, as of Oct 15, 2026

#5 of 39 modules by votes

  • Off until you switch it on
  • Needs Bricks 2.4 or newer
  • Tested with Bricks 2.4.3
Buy Kiln · all 39 modules, US$79 a yearBrowse the other 38 modules
Recording: on the Bricks > Kiln screen someone sets the page loader to the logo pulsing for at least 1,500 ms and saves. On the live page the logo pulses on cream, then the page fades in.Recorded in Bricks 2.4.3

The idea

Kiln ships the loader as a site-wide setting, not as an element. A loader placed in a template would flash on every page that does not use that template.

How to use it

  1. In Bricks > Kiln, turn on Site: page loader. Its settings open under the module's row.
  2. Choose a Style: Spinner, Progress bar at the top or Your logo, pulsing.
  3. Pick a Color and a Background with the color pickers. The defaults are #222222 and #ffffff.
  4. Set Size, from 16 to 400 px. The default is 48.
  5. For the logo style, click Choose image under Logo and pick an image from your Media Library.
  6. Set Show for at least (0 to 5000 ms, default 300) and Never longer than (1000 to 20000 ms, default 6000).
  7. Tick Only once per browser session to show the loader on a visitor's first page only. Tick Skip for logged-in users to hide it from people who are signed in.
  8. Save your changes and open the site in a private window.

The loader removes itself when the page has fully loaded, after the minimum time. If the page is still loading when the maximum time runs out, it is removed anyway.

Where it appears in Bricks

Nowhere in the builder. The loader is not an element and has no control group. It only has the settings on the Bricks > Kiln page, and it never runs inside the builder or in embeds.

On the front end, Kiln prints the overlay first thing in <body>, so it paints before your stylesheet arrives.

What the styles do

  • Spinner: a ring that turns. Size (px) is its diameter.
  • Progress bar (top): a 4 px bar along the top edge. It fills on a timer set by Never longer than, and stops at 95% until the page has loaded. It does not measure the real load. Size (px) has no effect on it.
  • Logo (pulsing): your image, pulsing between full and half opacity. Its maximum width is four times Size (px), or 60% of the window width if that is smaller. The image is output with empty alt text.

Limits

  • Without JavaScript the loader never shows. The overlay is hidden until its script switches it on, so a script error or a blocked inline script cannot trap a visitor behind it.
  • The logo style falls back to the spinner when the image is missing or is not an image. Saving an ID that is not an image clears the field.
  • Visitors who prefer reduced motion get no animation, and the overlay is removed at once without waiting for the minimum time.
  • The overlay is a screen-reader status with the text "Loading". It reports "busy" until it is removed.
  • If you run a Content Security Policy, the inline script goes through WordPress' script tag function, so a CSP plugin can add its nonce. The inline style needs style-src 'unsafe-inline' or a hash.
  • The script carries opt-out attributes for the "delay JavaScript" features of WP Rocket, LiteSpeed, Perfmatters and Cloudflare Rocket Loader, so they should leave it alone.
  • The theme must call wp_body_open, which Bricks does.

Settings

Style, Color, Background, Size, Logo, Show for at least, Never longer than, Only once per browser session and Skip it for logged-in users, all under the module in Bricks > Kiln. The module is off by default, because it changes what every visitor sees.

Requirements

Bricks 2.4 or newer.