KineticHub Page Loader

Description

KineticHub Page Loader lets you display a branded loading screen as your WordPress site is being rendered. It covers the page with your logo, site name, or a tagline – then cleanly fades out and removes itself from the DOM once the page is ready.

It is designed to improve the perceived first impression of your site by showing polished, intentional branding instead of a blank white page during the initial load. It does not improve server response time or actual page speed.

The loader is built with CSS-first animations and visual effects, vanilla JavaScript, and no external dependencies. It includes display rules for audience targeting, frequency controls, and exclusions for specific pages, URL paths, and WooCommerce pages. It respects user accessibility preferences, cleans up after itself, and is safe to use alongside caching plugins.

Key highlights:

• No jQuery dependency
• No external fonts, CDN assets, or remote requests
• CSS-first visual effects and seven polished presets
• Logo effects: fade, grayscale reveal, and soft scale
• Logo shapes: original, rounded corners, and circle
• Animated loading ring with style, color, speed, and thickness controls
• Display rules: visitors only, site-wide or homepage, excluded post/page IDs, excluded URL paths
• WooCommerce-safe exclusions for cart, checkout, and account pages
• Show frequency: every page load, once per session, or once per day
• No-flash suppression for once-per-session and once-per-day modes
• Respects prefers-reduced-motion – animations are collapsed for users who prefer reduced motion
• Loader is removed from the DOM after hiding, so it has no lasting impact on the page
• No focus trap – keyboard and screen reader users are not locked into the loader
• Maximum timeout safety – the loader always disappears, even if a resource never loads
• Compatible with classic themes, block themes, and WooCommerce

Features

• Enable / disable the loader from the settings screen
• Display on: entire site or homepage only
• Audience: everyone, or visitors only (hides the loader for logged-in users)
• Show frequency: every page load, once per session, or once per day
• Excluded post/page IDs: suppress the loader on specific posts or pages by ID
• Excluded URL paths: suppress the loader on specific URL paths
• WooCommerce exclusions: optionally exclude cart, checkout, and account pages when WooCommerce is active
• Logo: upload via the WordPress media library
• Text fallback: shown when no logo is set; falls back to the site name if empty
• Tagline: optional short line displayed beneath the logo or text
• Logo effects: fade in, grayscale reveal, or soft scale entrance animation
• Logo shapes: original, rounded corners, or circular logo frame
• Loading ring: animated ring around the logo with solid, dashed, dual, or glow styles; adjustable color, thickness, and speed
• Seven animation presets: each is a CSS-only visual effect with no JavaScript dependency
• Colors: background, accent, and text colors with optional gradient background
• Timing controls: minimum display time, maximum timeout, and fade-out duration
• Visibility: independently enable or disable the loader on desktop and mobile

Included Loader Styles

1. Minimal Pulse – Content breathes gently while an accent dot pulses below
2. Logo Fade – Content rises and fades in; a pulsing accent line signals loading
3. Gradient Sweep – An animated gradient flows across the background
4. Soft Orb – A radial glow breathes behind the logo and content
5. Progress Bar Minimal – A thin bar advances across the top as the loader waits
6. Circular Brand Ring – Logo displayed in a circle with two counter-rotating accent rings
7. Logo Color Reveal – Logo animates from grayscale to full color as the loader displays

All presets automatically collapse to an instant transition when prefers-reduced-motion: reduce is detected.