설명
KineticHub Page Loader is a customizable WordPress preloader and page loader for creating branded loading screens while a page finishes rendering. Add your logo, choose a loading animation, configure progress and transitions, and preview the result directly from the WordPress admin.
It is designed for branding and perceived presentation, not for pretending to make a website load faster. The plugin does not improve server response time or actual page speed; it gives visitors a polished visual experience while the page becomes ready.
KineticHub Page Loader is built with CSS-first animations and vanilla JavaScript, with no jQuery, external fonts, CDN assets, or frontend remote requests.
Smart loading experiences
- Smart Anti-Flash – an optional reveal delay so the loader does not flash on very fast page loads.
- KineticPower motion profiles – Ultra Minimal, Calm, Balanced, Dynamic, and Signature Glow, layered over the preset you choose.
- Seven loading animation presets – Minimal Pulse, Logo Fade, Gradient Sweep, Soft Orb, Progress Bar, Circular Brand Ring, and Logo Color Reveal.
- Live Preview – the settings screen renders your loading screen in real time as you change options.
Branding and logo effects
Upload a custom logo from the WordPress Media Library, or fall back to short text that defaults to your site name. An optional tagline sits below, with its own spacing control.
- Logo shapes: original, rounded, or circle
- Loading rings around the logo: solid, dashed, dual, or glow, with color, thickness and speed
- Logo reveal effects: Fade, Grayscale to Color, Soft Scale, Soft Shine Sweep, Zoom Bloom, and Mask Reveal
- Background, accent, text, and optional gradient colors
Progress, transitions and page reveal
Smart Progress adds a progress indicator in one of six styles: None, Top Bar, Bottom Line, Logo Ring, Center Glow Line, or Minimal Percentage.
Progress is simulated visual progress – a timed animation that conveys activity, not a measurement of actual network or download progress.
- Exit transitions: Fade, Slide Up, Blur Lift, Split Curtain, Circle Reveal
- Page Reveal for the handoff into your page: None, Soft Fade, Blur to Sharp, Lift In, Gentle Scale
- Cover modes: Solid, Soft Overlay, Blur Page, Glass
- An optional completion pulse, rotating loading messages, and one-click timing presets
Display rules and compatibility
Show the page loader site-wide or on the homepage only, to everyone or to visitors only, on every load, once per session, or once per day. Exclude specific post/page IDs and URL paths, optionally exclude the WooCommerce cart, checkout and account pages, and toggle desktop and mobile visibility independently.
The loader is output through standard WordPress frontend hooks (wp_body_open, with a wp_footer fallback), so it works with classic themes, block themes, and page builders that render normal frontend pages. Session and daily frequency are tracked in the browser, so pages stay cacheable alongside caching and performance plugins, and the loader includes failsafe handling for setups that delay frontend JavaScript.
Lightweight and accessible
- Vanilla JavaScript, no jQuery, no frontend remote requests
- Minified production CSS and JavaScript
- Respects
prefers-reduced-motionby collapsing animations to an instant transition - An
aria-hiddenvisual overlay with no focus trap, so keyboard focus stays on the page below - The loader element is removed from the DOM once it has hidden
- A
noscriptfallback hides the loader for visitors with JavaScript disabled - A bounded maximum timeout ensures the loading screen goes away even if a resource never loads
스크린샷
설치
- Install KineticHub Page Loader from the WordPress Plugin Directory, or upload the plugin ZIP.
- Activate the plugin.
- Go to Settings -> Page Loader.
- Enable the loader, add your logo or text, choose the visual options you want, and save.
FAQ
-
How do I add a preloader to WordPress?
-
Install and activate KineticHub Page Loader, then go to Settings -> Page Loader. Enable the loader, add your logo or text, pick a preset and the options you want, and save. The loading screen appears on the next frontend page load.
-
Can I use my own logo in the loading screen?
-
Yes. Upload any image from the WordPress Media Library. If no logo is set, a text fallback is shown instead, defaulting to your site name. You can add logo reveal effects (fade, grayscale to color, soft scale, shine sweep, zoom bloom, mask reveal), logo shapes (original, rounded, circle), and an animated loading ring.
-
Can I add a progress bar or loading percentage?
-
Yes. Smart Progress offers Top Bar, Bottom Line, Logo Ring, Center Glow Line, and Minimal Percentage styles, or None. This is simulated visual progress: a timed animation, not a measurement of the actual network loading percentage.
-
Can I control where the page loader appears?
-
Yes. Show it site-wide or on the homepage only, to everyone or to visitors only, and exclude specific post/page IDs, URL paths, or WooCommerce cart, checkout and account pages. Desktop and mobile visibility are independent.
-
Can the preloader show only once per session or once per day?
-
Yes. Show frequency can be every page load, once per session, or once per day. On repeat views within that window the loader is suppressed before it can paint, so there is no flash of a loading screen.
-
Does KineticHub Page Loader work with WooCommerce, page builders, and caching plugins?
-
It is designed to. WooCommerce cart, checkout, and account pages can be excluded with one toggle, and the loader is theme- and builder-agnostic because it renders through normal WordPress frontend hooks. Frequency tracking happens in the browser, so pages stay cacheable, and failsafe handling covers setups that delay frontend JavaScript. Third-party configurations vary, so compatibility with every possible combination cannot be guaranteed.
-
Does a preloader make my WordPress site faster?
-
No. It changes the visual loading experience and perceived presentation. It does not reduce server response time or optimize your assets.
-
Does the loader respect reduced motion and accessibility preferences?
-
Yes. When
prefers-reduced-motion: reduceis set, animations collapse to an instant transition. The overlay is markedaria-hiddenso screen readers skip it, there is no focus trap, and the loader is removed from the DOM after hiding. With JavaScript disabled, anoscriptblock hides the loader so the page is never blocked.
후기
이 플러그인에 대한 평가가 없습니다.
기여자 & 개발자
“KineticHub Page Loader – Preloader & Branded Loading Screen”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.
기여자
변경이력
1.4.1
- Fixed: on phones, a logo wider than the screen (Logo Max Width) was cut off. The logo, circle frame, and rings now scale down to fit; where they already fit, nothing changes.
- Fixed: with the Lift In, Gentle Scale, or Blur to Sharp page reveal, the loader logo could jump on phones as the loader exited, and desktop pages could flash a horizontal scrollbar, on pages with a fixed element wider than the screen.
- Fixed: on busy Android pages, Circle Reveal could flicker and exits could stutter or skip. Exits start on a fresh frame; Circle Reveal uses far less GPU memory.
- Fixed: with WP Rocket’s Remove Unused CSS, some pages showed the loader with a plain white background. The loader’s styles are now excluded. Clear WP Rocket’s cache after updating.
- Tested up to WordPress 7.1.
1.4.0
- Added: Smart Anti-Flash, KineticPower motion profiles, Soft Shine Sweep, Zoom Bloom and Mask Reveal logo effects, Smart Progress styles (simulated, not measured), exit transitions, page reveal, cover modes, rotating loading messages, a completion pulse, and timing presets.
- Improved: redesigned settings screen with an expanded Live Preview, and more robust scroll locking on iOS and Safari.
- Every new option defaults to the previous behavior, so existing sites look the same until you opt in.
1.3.0
- Added: Tagline Spacing setting; a one-time, dismissible review request shown only on the plugin’s settings page; a KineticHub – Animated Blocks card on the settings page when that plugin is not installed.
- Fixed: with no logo set, the circle shape and Circular Brand Ring preset reserved empty space, and rings appeared as stretched ellipses around the text fallback.
- Improved: ring options are disabled with a note while Circular Brand Ring is selected (saved values are kept), and the settings sidebar stays usable on short screens.