KineticHub Page Loader
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, vanilla JavaScript, and no external dependencies. 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 animations – five polished presets included
- 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
- Once-per-session display option using
sessionStorage - Maximum timeout safety – the loader always disappears, even if a resource never loads
- Works alongside common caching plugins
- Compatible with classic themes, block themes, and WooCommerce pages
Features
- Enable / disable the loader from the settings screen
- Display on: entire site or homepage only
- Show frequency: every page load or once per session
- 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
- Five animation presets: each is a CSS-only animation 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
- Minimal Pulse – A small pulsing dot using the accent color
- Logo Fade – Content fades and rises in gently
- Gradient Sweep – An animated gradient that flows across the background
- Soft Orb – A radial glow that breathes behind the content
- Progress Bar Minimal – A thin bar that advances across the top of the loader
All presets automatically collapse to an instant transition when prefers-reduced-motion: reduce is detected.