KineticHub Page Loader

Overview

KineticHub Page Loader covers the page with a branded overlay — your logo or text, an optional tagline, and an animated loading ring — then fades out and removes itself from the DOM once the page is ready.

Use it for:

• A branded first impression instead of a blank white page
• A polished site intro on the homepage
• A consistent loading screen across a client site
• A splash screen shown once per visitor session or day

The loader does not improve server response time or page speed. It improves the perceived first impression while the page finishes rendering behind it.

Install the plugin

1. Go to Plugins → Add New
2. Search for KineticHub Page Loader
3. Install and activate
4. Go to Settings → Page Loader
5. Upload your logo, pick a preset, choose your colors
6. Save and open your site’s frontend to test

The loader appears on the frontend only. Test in a private/incognito window if you use a session or daily frequency, so previously stored visits do not suppress it.

Core and display rules

Open Settings → Page Loader. The first section controls whether and where the loader appears.

Enable Loader

Turns the loader on or off globally. All other settings are kept when disabled.

Display On

• Entire site — the loader can appear on every frontend page
• Homepage only — the loader appears only on the site’s front page

Audience

• Everyone — all visitors, including logged-in users
• Visitors only — the loader is hidden for logged-in users

Visitors only is useful while you fine-tune content as an administrator, and on client sites where editors work in the frontend.

Show Frequency

• Every page load — the loader appears on every eligible pageview
• Once per session — one appearance per browser session
• Once per day — one appearance per visitor per day

Session and daily tracking are stored in the visitor’s browser using sessionStorage and localStorage. No server-side session state is used, so the setting is fully compatible with full-page caching.

For once-per-session and once-per-day modes, a no-flash mechanism prevents the loader from briefly flashing on repeat pageviews, and the logo image is not downloaded at all on pageviews where the loader has already been shown.

Excluded Post/Page IDs

Enter a comma-separated list of post or page IDs where the loader must never appear.

Excluded URL Paths

Enter URL paths to exclude. Any request whose path matches an entry suppresses the loader on that page.

Exclude WooCommerce Pages

When WooCommerce is active, this toggle excludes the loader from the cart, checkout, and account pages. Never place a loading screen between a customer and their order.

WooCommerce does not need to be installed for the plugin to work — the exclusion applies only when WooCommerce is active.

Content

This section controls what the loader displays.

Logo

Upload an image through the WordPress media library.

Use Logo Max Width to control its rendered size:

50–800 px

A square logo between 256–512 px gives the cleanest result across presets, shapes, and the loading ring.

Text Fallback

Shown when no logo is set. When left empty, the site name is used.

Tagline

An optional short line displayed beneath the logo or text. Leave it empty to hide it.

Design

This section controls how the loader looks and animates.

Preset

Seven CSS-only presets are included:

• Minimal Pulse — content breathes gently while an accent dot pulses below
• Logo Fade — content rises and fades in; a pulsing accent line signals loading
• Gradient Sweep — an animated gradient flows across the background
• Soft Orb — a radial glow breathes behind the logo and content
• Progress Bar Minimal — a thin bar advances across the top
• Circular Brand Ring — the logo in a circle with two counter-rotating accent rings
• Logo Color Reveal — the logo animates from grayscale to full color

Every preset is pure CSS with no JavaScript animation loop, and every preset collapses to an instant transition when the visitor prefers reduced motion.

Colors

• Background color — the full-screen overlay color
• Accent color — used by preset accents and, by default, the loading ring
• Text color — used by the text fallback and tagline
• Gradient — enable to blend the background color into a second gradient color

Logo Effect

Entrance animation for the logo:

• Fade in
• Grayscale reveal
• Soft scale

Logo Shape

• Original — the image as uploaded
• Rounded corners
• Circle — a circular frame; works best with square images

Loading Ring

An animated ring around the logo. Available styles:

• Solid
• Dashed
• Dual — two counter-rotating rings
• Glow

Adjust the ring’s color, thickness, and speed. When no ring colors are set, the ring inherits the accent color (and the gradient color for the second ring in Dual style).

Behavior

This section controls timing and device visibility.

Minimum Display Time

The shortest time the loader stays visible, even when the page is ready sooner. Prevents an unpleasant instant flash on fast pages.

Maximum Timeout

A safety net. If a third-party resource never finishes loading and the browser load event never fires, the loader is removed anyway when this timeout is reached. The loader can never block a page indefinitely.

Fade-Out Duration

How long the closing fade takes once the page is ready.

Desktop / Mobile Visibility

Independently enable or disable the loader on desktop and on mobile devices.

How the loader works

Understanding the lifecycle helps when debugging:

1. The loader markup is printed server-side at wp_body_open (with a wp_footer fallback for themes that do not call wp_body_open), so it appears before the page content renders.
2. The overlay stays visible until the browser load event fires and the minimum display time has passed — or until the maximum timeout is reached, whichever comes first.
3. The loader fades out over the configured fade duration.
4. The loader element is completely removed from the DOM. Nothing remains on the page afterward.

Visitors with JavaScript disabled never see a blocked page: a <noscript> style rule in <head> hides the loader immediately.

Accessibility and reduced motion

• The overlay uses aria-hidden="true", so screen readers skip it entirely
• There is no focus trap — keyboard focus stays on the page below
• When the visitor’s system reports prefers-reduced-motion: reduce, all animations collapse to an instant transition and the minimum display time is effectively bypassed, so the loader disappears as quickly as possible
• After hiding, the loader is removed from the DOM and has no residual impact on the accessibility tree

Do not rely on the loader to communicate information a visitor must not miss — treat it as decoration for the loading phase only.

Caching and optimization plugins

The loader HTML is output server-side and is cached normally by full-page cache plugins. Frequency tracking runs entirely in the visitor’s browser, so no cache exclusions are needed.

If your optimization plugin delays or defers frontend JavaScript, the maximum timeout guarantees the loader is still removed. If you change loader settings and see stale output, clear your page cache.

Recommended starting settings

For a branded business site:

• Display On: Entire site
• Audience: Visitors only
• Show Frequency: Once per session
• Preset: Circular Brand Ring
• Logo: square PNG, Logo Max Width 120–200 px
• Logo Shape: Circle, Loading Ring: Dual
• Minimum Display Time: long enough to read the brand, short enough not to annoy — start low and increase only if the loader flashes
• Desktop and Mobile: both enabled

For a portfolio or landing page with a strong intro moment, use Gradient Sweep or Soft Orb with a gradient background and the loader on the homepage only.

Troubleshooting

The loader does not appear

Check:

• Enable Loader is on
• You are testing the frontend, not the admin
• Audience is not set to Visitors only while you are logged in
• Show Frequency — in session/day mode, open a private window or clear site data
• The current page is not excluded by ID, URL path, or the WooCommerce toggle
• Desktop/Mobile visibility matches the device you are testing
• Your page cache was cleared after changing settings

The loader flashes and disappears immediately

Increase the Minimum Display Time. On very fast pages the load event can fire almost instantly.

Note that visitors with reduced motion enabled intentionally skip the minimum display time — this is expected behavior, not a bug.

The loader stays visible too long

Check:

• Maximum Timeout is not set excessively high
• A third-party script, font, or image is not failing to load (the browser load event waits for it; the loader is removed at the maximum timeout regardless)
• An optimization plugin is not delaying all JavaScript — the loader still respects the maximum timeout, but heavily delayed scripts postpone the earlier, event-based removal

The loader shows on cart or checkout

Enable Exclude WooCommerce Pages in the display rules, or add the page IDs to Excluded Post/Page IDs.

The logo looks blurry or oversized

Upload a larger source image (at least 2× the configured Logo Max Width for sharp rendering on high-DPI screens) and adjust Logo Max Width (50–800 px).

The loader appears on every visit despite session/day frequency

Frequency is stored in the visitor’s browser. Private windows, cleared site data, and some privacy extensions reset it. Test in a normal window and reload the same tab.

Next step

See the plugin live before installing: open the Live Preview on the WordPress.org plugin page to try the loader on a demo site — no install needed.

---

Support box: Use the WordPress.org support forum for the free Page Loader plugin. For KineticHub Blocks PRO, licensing, and account questions, contact KineticHub support.