Page Preloader

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the overlay as the FIRST thing inside <body>:

Code snippet omitted: it ships with the download.

3. Mark the elements that should stagger in after the curtain clears:

Code snippet omitted: it ships with the download.

4. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect needs from your markup is small: one overlay element carrying data-preloader as the first child of <body>, and inside it whatever you want to fade (data-preloader-fade), the counter (data-preloader-count), the bar fill (data-preloader-bar) and one or two panels (data-preloader-panel). Anything in the page marked data-preloader-reveal staggers in as the curtain clears. The script never reads a class name, so the preloader__* classes are only there to hang styles on.

The stylesheet has a handful of rules the sequence depends on, each marked CONTRACT in style.css; keep them when you restyle:

• .preloader { display: none } with .has-js .preloader { display: block }: the overlay only exists when the script runs, so a page without JavaScript is a plain document.
• .has-js [data-preloader-reveal] { opacity: 0; visibility: hidden; transform: translateY(28px) }: the reveal start state. Change the distance freely; without the pre-hide the reveal paints visible, flashes to 0 and fades back in.
• The panels are position: absolute; inset: 0 inside the fixed overlay, stacked in DOM order. The script moves them and never sets their colour, so the front and back panels are yours to colour. The back panel is what shows behind the front one during the wipe and around the iris hole, so give it a visible step from the front.
• The iris rule keyed on [data-preloader-exit="iris"]: a radial-gradient mask on each panel driven by the --iris variable the script tweens. Delete it only if you never use the iris style.
• .preloader-lock { overflow: hidden } on <html>: the scroll lock while the overlay is up.
• The bar fill needs transform-origin: left center (or wherever you want it to grow from); the script only sets scaleX.

Everything else, the landing hero, the nav, the segmented exit switcher, the photograph, the counter's size and face, is the demo's own design and can be deleted or restyled. Tabular figures on the counter (font-variant-numeric: tabular-nums) stop the number jittering sideways as digits change, which any face benefits from.

Options

All options go on the data-preloader overlay element.

Element Hooks

The iris style needs no extra markup: the script writes the resolved exit style back onto the overlay's data-preloader-exit attribute, and the stylesheet's iris rule (a radial-gradient mask driven by a --iris variable, applied per panel) keys off it. The panels open in sequence, front first and back chasing, so the hole's edge is always the back panel's colour against your page and the opening reads as an expanding ring. An overlay built without panels irises as one piece instead.

Zero-Flash Setup (recommended)

The script adds a has-js class to <html> as its first statement, and all hiding CSS (.has-js .preloader, .has-js [data-preloader-reveal]) is gated behind it. Because the script loads at the end of <body>, an extremely slow connection could paint the page for a moment before it runs. To guarantee a zero-flash start, move that one line into your <head>:

Code snippet omitted: it ships with the download.

The line at the top of script.js is harmless to leave in place; adding a class twice does nothing.

Accessibility

• Reduced motion: with prefers-reduced-motion: reduce the sequence never runs — the overlay is hidden and content is simply there. This is enforced twice: in CSS via the media query and in JavaScript via gsap.matchMedia.
• No JavaScript: the overlay is display: none by default and reveal targets are only pre-hidden when the has-js class is present, so the page renders as a plain readable document.
• Screen readers: the counter is aria-hidden (a number flashing to 100 is noise); a visually hidden role="status" element announces "Loading page" instead.
• Scroll lock: scrolling is disabled only while the overlay is up and always released, including on the skip paths.

Dependencies

Required:

• GSAP 3.12+ (core only — no plugins)