KineticHub Page Loader – Preloader & Branded Loading Screen

Description

KineticHub Page Loader is a lightweight preloader plugin that displays a branded loading screen while your WordPress site is being rendered. Instead of a blank white page, your visitors see a polished splash screen with your logo, site name, or tagline, an optional animated loading ring (spinner), and a smooth loading animation — then the preloader cleanly fades out and removes itself from the DOM once the page is ready.

The preloader is designed to improve the perceived first impression of your site. It does not improve server response time or actual page speed — it replaces the unstyled flash of a loading page with intentional branding.

The loading screen is built with CSS-first animations, vanilla JavaScript, and zero external dependencies: no jQuery, no external fonts, no CDN assets, no remote requests. It ships with display rules for audience targeting, show frequency, and exclusions for specific pages, URL paths, and WooCommerce pages. It respects prefers-reduced-motion, cleans up after itself, and is safe to use alongside caching plugins.

Why use a preloader?

• Replace the blank white screen during page load with a branded splash screen
• Reinforce your brand with a logo loading screen on every first visit
• Give slow or asset-heavy pages a polished loading animation instead of a half-rendered layout
• Keep full control: show the preloader site-wide, only on the homepage, only to visitors, or only once per session or per day

Key highlights

• 7 CSS-only loader presets — from a minimal pulse to gradient sweeps and circular brand rings
• Logo loading screen — upload your logo via the media library, with text and tagline fallbacks
• Animated loading ring (spinner) — solid, dashed, dual, or glow styles with color, speed, and thickness controls
• Logo effects and shapes — fade, grayscale reveal, soft scale; original, rounded, or circular frame
• Display rules — visitors only, site-wide or homepage only, excluded post/page IDs, excluded URL paths
• Show frequency — every page load, once per session, or once per day, with no-flash suppression
• WooCommerce-safe — optionally exclude the loading screen on cart, checkout, and account pages
• Lightweight and dependency-free — no jQuery, no external fonts, no CDN assets, no remote requests
• Accessible by design — respects prefers-reduced-motion, no focus trap, aria-hidden overlay, removed from the DOM after hiding
• Always fails safe — a maximum timeout guarantees the preloader disappears even if a resource never loads
• Compatible with classic themes, block themes, page builders, caching plugins, and WooCommerce

Features

• Enable / disable the preloader from the settings screen
• Display on: entire site or homepage only
• Audience: everyone, or visitors only (hides the loading screen for logged-in users)
• Show frequency: every page load, once per session, or once per day
• Excluded post/page IDs: suppress the preloader on specific posts or pages by ID
• Excluded URL paths: suppress the preloader 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 spinner 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 loading screen 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.