Sometimes the spinner you want is one you already have, from a CSS pen or a design system.
The Custom Code loader type drops your own markup onto the overlay and leaves the styling to you.
For every Pre Loader setting in one place, see the Pre Loader block guide.
Before You Start
- Edition: Pro — the Pre Loader block is part of Nexter Blocks Pro.
- Block to enable: Pre Loader, switched on under Nexter > Blocks in your WordPress dashboard.
- Your markup and CSS ready: the HTML goes in the block, the CSS goes wherever you normally add custom CSS.
Steps
- Add the Pre Loader block to the page and click Design from Scratch.
- In the Pre Loader panel, click + Add Item and set Select Type to Custom Code.
- Paste your HTML into the code field — usually a wrapper with a class of your own, such as
<div class="my-spinner"></div>.
- Add the matching CSS to your site, targeting that class.
- Publish the page and open it in a new tab.
The editor only shows a small static preview of the loader. On the published page it covers the whole screen until loading finishes.
How It Behaves
- Your markup is output inside a
tpgb-preloader-customwrapper, exactly as you wrote it. - Because the block does not style it, your CSS has full control — and is entirely responsible for it looking right.
- Target your own class rather than the block’s wrapper, so a plugin update cannot change what your CSS matches.
- While the page is loading, the block adds
tpgb-body-preloaderto the page and shows the overlay. Once loading finishes it swaps intpgb-loadedand the overlay goes away.
Limitations
- Pro only.
- The CSS is not stored with the block. If it lives in a theme’s custom CSS, switching themes loses it.
- Any CSS needed for the loader must arrive before the loader is shown, or the first render will be unstyled.
- Markup goes in as written, so a typo here breaks the overlay rather than being cleaned up for you.
Troubleshooting
The loader is invisible
The markup is probably there but unstyled and zero sized. Give your element an explicit width and height in your CSS.
My CSS does not apply
Check the class in the block matches the selector in your CSS, and that the stylesheet loads on the front end rather than only in the editor.
It flashes unstyled for a moment
The CSS is arriving after the loader. Move it somewhere loaded earlier, or use a Lottie animation which carries its own appearance.
