KineticHub Page Loader – Preloader & Branded Loading Screen

开发者	kinetichub
更新时间	2026年7月13日 05:24
PHP版本:	7.4 及以上
WordPress版本:	7.0
版权:	GPLv2 or later
版权网址:	版权信息

下载

1.0.0 1.1.0 1.1.1 1.2.0

详情介绍:

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

安装:

Upload the kinetichub-page-loader folder to /wp-content/plugins/, or install directly through the WordPress plugin directory.
Activate the plugin through the Plugins screen in WordPress.
Go to Settings -> Page Loader to configure your preloader.
Upload your logo, choose a loading screen preset, set your colors, and save.

屏幕截图:

升级注意事项:

1.2.0 Performance improvements: minified assets, no-cost logo loading for repeat pageviews on session/day frequency, and a more efficient progress-bar animation. No settings changes required. 1.1.1 Fixes a loader removal issue on sites using cache or performance plugins that delay frontend JavaScript. 1.1.0 Adds display rules, once-per-day loading, WooCommerce-safe exclusions, new branded logo effects, loading rings, and improved no-flash behavior. 1.0.0 Initial WordPress.org release.

常见问题:

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 <noscript> style block is output in <head> that hides the loader immediately. Visitors with JavaScript disabled see the page normally without any blocked overlay.

Does it respect reduced motion settings?

Yes. When the visitor's operating system or browser reports prefers-reduced-motion: reduce, all animations are collapsed to an instant transition and the minimum display time is effectively bypassed, so the preloader disappears as quickly as possible.

What is the "maximum timeout" setting?

It is a safety net. If a third-party resource (script, font, image) never finishes loading and the browser load event never fires, the maximum timeout ensures the loading screen is removed anyway, preventing it from blocking the page indefinitely.

Is the loader accessible?

The loader uses aria-hidden="true" so screen readers skip it. There is no focus trap — keyboard focus stays on the page below. The loader is fully removed from the DOM after hiding, leaving no residual impact on the accessibility tree.

Can I remove the preloader on specific pages?

Yes. Use Excluded post/page IDs for individual posts or pages, Excluded URL paths for path-based rules, and the WooCommerce toggle for cart, checkout, and account pages.

更新日志:

1.2.0

Performance: distributed CSS and JavaScript files are now minified via an automated build step.
Performance: the loader logo now ships with width/height and fetchpriority="high" to reduce its impact on Largest Contentful Paint (LCP).
Performance: for "Once per session" and "Once per day" frequency, the logo image is no longer downloaded at all on pageviews where the loader has already been shown - only the loader markup itself was suppressed before.
Performance: the Progress Bar Minimal preset now animates with transform instead of width, avoiding unnecessary layout recalculation while the bar advances.
Internal: settings and display-eligibility checks are now computed once per request instead of being recalculated on every output hook.

1.1.1

Fixed loader removal reliability when cache or performance plugins delay frontend JavaScript.
Hardened maximum timeout behavior so the loader cannot remain visible indefinitely on optimized pages.

1.1.0

Added display rules: visitors-only loading, once-per-day frequency, excluded post/page IDs, excluded URL paths, and WooCommerce page exclusions.
Added no-flash suppression for once-per-session and once-per-day display modes.
Added logo effects (fade, grayscale reveal, soft scale), logo shape controls (rounded, circle), and loading ring options (solid, dashed, dual, glow).
Added two new loader presets: Circular Brand Ring and Logo Color Reveal.
Improved preset visual quality, reduced-motion handling, ring and shape compatibility, and admin UI usability.

1.0.0

Initial release.
Added lightweight page loader with five CSS-first animation presets.
Added logo upload, text fallback, and optional tagline.
Added background, accent, and text color controls with optional gradient.
Added minimum display time, maximum timeout, and fade-out duration controls.
Added once-per-session display option.
Added desktop and mobile visibility controls.
Added maximum timeout safety net to prevent indefinite blocking.
Added prefers-reduced-motion support.
Added noscript fallback to hide loader for JavaScript-disabled visitors.
Added wp_footer fallback output for themes without wp_body_open support.