Title: KineticHub Page Loader – Preloader & Branded Loading Screen
Author: kinetichub
Published: Metheven 29, 2026
Last modified: Gortheren 12, 2026
---
Search plugins
# KineticHub Page Loader – Preloader & Branded Loading Screen
By [kinetichub](https://profiles.wordpress.org/kinetichub/)
[Download](https://downloads.wordpress.org/plugin/kinetichub-page-loader.1.2.0.zip)
[Live Preview](https://cor.wordpress.org/plugins/kinetichub-page-loader/?preview=1)
* [Details](https://cor.wordpress.org/plugins/kinetichub-page-loader/#description)
* [Reviews](https://cor.wordpress.org/plugins/kinetichub-page-loader/#reviews)
* [Installation](https://cor.wordpress.org/plugins/kinetichub-page-loader/#installation)
* [Development](https://cor.wordpress.org/plugins/kinetichub-page-loader/#developers)
[Support](https://wordpress.org/support/plugin/kinetichub-page-loader/)
## 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.
## Screenshots
[⌊Loader presets in action - branded loading screens with logo, animated loading
ring, and CSS-only animations.⌉⌊Loader presets in action - branded loading screens
with logo, animated loading ring, and CSS-only animations.⌉[
Loader presets in action – branded loading screens with logo, animated loading ring,
and CSS-only animations.
[⌊Core and display rules settings - enable the preloader, site-wide or homepage,
audience, frequency, and exclusions.⌉⌊Core and display rules settings - enable the
preloader, site-wide or homepage, audience, frequency, and exclusions.⌉[
Core and display rules settings – enable the preloader, site-wide or homepage, audience,
frequency, and exclusions.
[⌊Content settings - logo upload, text fallback, and tagline.⌉⌊Content settings -
logo upload, text fallback, and tagline.⌉[
Content settings – logo upload, text fallback, and tagline.
[⌊Behavior settings - minimum display time, maximum timeout, fade-out duration,
and desktop/mobile visibility.⌉⌊Behavior settings - minimum display time, maximum
timeout, fade-out duration, and desktop/mobile visibility.⌉[
Behavior settings – minimum display time, maximum timeout, fade-out duration, and
desktop/mobile visibility.
[⌊Design settings - loader presets, colors, and gradient background.⌉⌊Design settings-
loader presets, colors, and gradient background.⌉[
Design settings – loader presets, colors, and gradient background.
[⌊Design settings - logo effects, logo shapes, and animated loading ring controls.⌉⌊
Design settings - logo effects, logo shapes, and animated loading ring controls.⌉[
Design settings – logo effects, logo shapes, and animated loading ring controls.
## Installation
1. Upload the `kinetichub-page-loader` folder to `/wp-content/plugins/`, or install
directly through the WordPress plugin directory.
2. Activate the plugin through the **Plugins** screen in WordPress.
3. Go to **Settings -> Page Loader** to configure your preloader.
4. Upload your logo, choose a loading screen preset, set your colors, and save.
## FAQ
### How do I add a preloader to my WordPress site?
Install and activate KineticHub Page Loader, then go to **Settings -> Page Loader**.
Enable the loader, upload your logo (or use the text fallback), pick one of the
7 loading screen presets, choose your colors, and save. The preloader appears on
the next front-end page load.
### Does a preloader make my website faster?
No. KineticHub Page Loader does not improve server response time or optimize assets.
It creates a branded loading layer that can improve the **perceived first impression**
of your site while the page finishes rendering in the background.
### Will the preloader hurt my Core Web Vitals or SEO?
The plugin is built to keep its footprint minimal: assets are minified, there are
no external requests, the loader logo ships with explicit dimensions, and the overlay
is fully removed from the DOM after hiding. The preloader is a visual layer on top
of your page — it does not block search engine crawlers from seeing your content.
### Can I show the loading screen only on the homepage?
Yes. Under **Display Rules** you can choose between showing the preloader on the
entire site or on the homepage only. You can also exclude specific post/page IDs
and URL paths.
### Can I show the preloader only once per visitor?
Yes. The show frequency setting supports every page load, once per session, or once
per day. In session and daily modes, a no-flash suppression mechanism prevents the
loader from briefly flashing on repeat pageviews.
### Can I use my own logo in the loading screen?
Yes. Upload any image from the WordPress media library. You can apply logo effects(
fade, grayscale reveal, soft scale), shapes (original, rounded, circle), and an
animated loading ring around it. If no logo is set, a text fallback (defaulting
to your site name) is displayed instead.
### Can I disable the preloader on mobile or desktop?
Yes. Desktop and mobile visibility can be toggled independently in the settings.
### Does it work with caching plugins?
Yes. The loader HTML is output server-side and cached normally. Session and daily-
limit tracking are handled entirely client-side using `sessionStorage` and `localStorage`,
so no server-side session state is needed and full-page-cache compatibility is maintained.
### Does it work with Elementor, Divi, and other page builders?
Yes. The preloader is theme-agnostic: it overlays the finished page using the standard`
wp_body_open` hook (with a `wp_footer` fallback), so it works with any theme or
page builder that renders normal front-end pages. It does not modify your builder
content.
### Does it work with block themes?
Yes. The loader uses the `wp_body_open` action that all modern themes call. A `wp_footer`
fallback is included for themes that do not call `wp_body_open`.
### Does it support WooCommerce?
Yes. You can exclude the loading screen from WooCommerce cart, checkout, and account
pages using the **Exclude WooCommerce Pages** toggle in the Display Rules settings.
WooCommerce does not need to be installed for the plugin to work; the exclusion
is applied only when WooCommerce is active.
### Does it use jQuery?
No. The frontend script is plain vanilla JavaScript with no library dependencies,
no external fonts, and no CDN or remote requests.
### What happens if JavaScript is disabled?
A `