Preloader

Monogram features an animated page preloader that displays during the initial page load. It gives visitors a polished first impression with animated lines, a progress counter, and status text - all while the page assets load in the background.

#How It Works

The preloader follows a carefully sequenced animation:

1. Intro animation - Vertical and horizontal lines draw in, followed by a plus icon and the counter fading into view.

2. Fake progress - The counter begins advancing from 0% up to approximately 85%. This simulated progress keeps the animation moving even before all assets have loaded.

3. Real progress - Once the browser fires the window.load event (all images, fonts, and scripts are ready), the counter accelerates from wherever it is to 100%.

4. Status text - Updates as progress advances: "initializing" > "loading assets" > "finishing" > "success".

5. Close - After reaching 100%, the preloader waits briefly, then slides up and out of view. The page-is-loaded class is added to the body, signaling the rest of the theme to begin.

The preloader only displays on the first page load. If page transitions are enabled, subsequent navigations use the page transition loader instead.

#Settings

Navigate to Appearance > Customize > Preloader to configure the feature.

Setting	Type	Default	Description
Enable Preloader	Toggle	On	Show the preloader animation on the first page load.
Start Delay	Slider (0–2000 ms)	500 ms	Delay before the preloader animation begins. Use this to let the browser render the preloader element before animating.
Fake Progress Speed	Slider (0.01–0.2)	0.035	How fast the simulated progress counter advances. Higher values make it reach the ~85% threshold faster. Lower values create a slower, more dramatic build-up.
Close Delay	Slider (0–2000 ms)	500 ms	How long the preloader waits after reaching 100% before starting the close animation. A short pause lets the "success" status text register with the visitor.
Close Animation Duration	Slider (0.3–2.0 s)	0.9 s	Duration of the slide-up closing animation. Shorter values feel snappier; longer values feel more cinematic.

#Tips

• For fast-loading sites, increase the Fake Progress Speed so the counter does not linger at low percentages while the page is already ready.

• If the preloader feels too slow on repeat visits (when assets are cached), reduce the Close Delay to get visitors to the content faster.

• To disable the preloader entirely, turn off the Enable Preloader toggle. The site will display immediately without any loading animation.

Last updated 19 Aug 2026