Profile
TrustyGems
Buy Buy Now
Premium WordPress Plugin

Premium Preloader
Ultimate Loading Experience

A premium preloader plugin combining clean design and fluid layout animations to engage your website visitors from the very first second.

Explore Features Watch Preview
Stability
100% Secure
Performance
Ultra Smooth
WordPress 6.x
Vanilla JS
Ultra Fast
SSL Secured
Mobile Ready
Clean Code
Lifetime License
24/7 Support
Zero CLS
salient features

Core System Features

An overview of the core visual highlights and smooth background features driving this template.

Premium Visual Design

Features a responsive loading ring with a soft glow, instantly elevating your site’s modern design aesthetic.

Design Element: Smooth Circular Glow
99%Active Status

Automatic Scroll Lock

Locks page scroll during loading to prevent premature scrolling and layout breaks, controlled viewing flow.

Layout Control: Scroll Protection
Scroll Locked

Smooth Loading Progress

Ensures smooth, step-by-step loading without sudden speed jumps, balanced for a seamless user experience.

Pacing Control: Smooth Flow Delivery
Phase IPhase IICompleted

Live Status Messages

Cycles through clear onboarding states, keeping users informed with short, professional status updates.

UX Highlight: Context-Aware Copy

Clean Animation Effects

Emits expanding wave animations as progress milestones are reached, adding modern detail to the layout.

Motion Design: Harmonic Wave Cycles

Smooth Reveal Transitions

Smoothly fades out after a subtle finish animation, cleanly revealing content without lagging.

Exit Sequence: Clean Content Handoff
View State Active

16 Pillars
of Perfection

We threw away the traditional bento grid. Scroll through the architectural foundation that makes our core system unconditionally secure and lightning-fast.

01

Excellent Security

Inside the generic validate_access_control() method, the standard current_user_can('manage_options') check ensures that only authorized administrators can access or modify settings.

02

Superb Sanitization

Every input argument uses a specific type and proper sanitize callback (like clean_custom_input, sanitize_text_field, absint), preventing SQL Injection and XSS attacks.

03

Cache Optimization

Using generic fetch_stored_parameters(), fetch_stored_structure() structures ensures repeated method calls fetch data directly from memory instead of processing again.

04

Smart DB Saving

In update_system_data(), ksort() and sort() compare settings beforehand. If no changes are detected, it skips database queries to reduce server load.

05

Robust Error Handling

Code wrapped in a try-catch block manages WP_DEBUG efficiently, hiding long error strings from production users while logging clean errors.

06

Performance Architecture

Using requestAnimationFrame instead of setInterval matches the browser's refresh rate, reducing GPU load for smooth 60fps animations.

07

IIFE Structure

Wrapping the JavaScript in an (function () { ... })(); prevents its variables from conflicting with other scripts on the website.

08

Accessibility (a11y)

The code ensures accessibility by using standard HTML attributes like role="status", aria-valuemin, aria-valuenow, and aria-busy for screen readers.

09

Real-time Live Preview

Using window.addEventListener('message') with postMessage allows the admin panel dashboard to update frontend settings instantly without page refreshes.

10

UX & Fallbacks

To handle slow loading, FALLBACK_MS and EMERGENCY_BUFFER_MS constants create a fallback system that hides the preloader after a set time, preventing crashes.

11

Reduced Motion

The @media (prefers-reduced-motion: reduce) query automatically disables or reduces animations for users who have turned off animations in their OS.

12

Smart Caching

Using a generic check_display_state() static manager function instead of global variables prevents memory leaks and variable conflicts with other plugins.

13

Transient API Caching

Instead of reading the local logo asset file on every page load, set_transient() caches its base64 string for 24 hours to minimize disk I/O operations.

14

Agile Resource Injection

Using cached data from retrieve_sanitized_config(), the script injects inline dynamic CSS and JS script tags directly, saving separate server PHP requests.

15

Ironclad Bot Detection

The evaluate_skip_condition() function detects and skips loading for REST API, JSON requests, and major search engine or AI crawler bots to protect SEO.

16

Clickjacking Protection

Applying X-Frame-Options: SAMEORIGIN and Content Security Policy (CSP) headers in the initialize_response_meta() method prevents unauthorized loading via iframe.

engine analysis

Under-The-Hood Engine Mechanics

An architectural analysis based on an in-depth evaluation of the core preloader system code.

Anti-Bypass MutationObserver

A native `MutationObserver` monitors layout nodes, instantly reinstating defensive lock styles if unauthorized bypass attempts occur.

[DOM_NODE] Inspected
<body style="overflow:hidden">
Mutation detected -> Re-locked
DOM Security: Real-time Guard

Smart Fake Steps Pacing

A simulated progress engine uses custom randomized algorithms to drive smooth speed increments up to 88%, enhancing user retention.

Simulating Linear Curve Max 88%
Factor: Math.random() * 1.8
Algorithm: Dynamic Simulation

High-Precision Checkpoints

Microsecond timeline arrays align with network latency and rendering states, ensuring perfect lifecycle synchronization until DOM finalization.

[CHECK] { at: 250ms, val: 18% }
[SYNC] { at: 1450ms, val: 69% }
[FINAL] { at: 2500ms, val: 100% }
[CHECK] { at: 250ms, val: 18% }
[SYNC] { at: 1450ms, val: 69% }
[FINAL] { at: 2500ms, val: 100% }
Timeline Sync: Array Validation

Strobe Impact Flash Effect

Injects a termination canvas layer that triggers a seamless 220ms ambient stroke flash at completion, elevating the content reveal.

SOURCE
DOM_Node
STATUS
Terminated
Visual FX: 220ms Termination

Auto-Purge Memory Routine

An async garbage collection mechanism destroys preloader nodes 820ms after completion, eliminating memory leaks and preserving performance.

UNUSED DATA
Trash Node
Purging...
---
SYSTEM STATE
Optimized
Optimization: Node Disposal

Pointer Event Isolation

Enforces an absolute pointer boundary over the viewport during initialization to prevent accidental interactions, switching to passive upon termination.

pointer-events: all
UX Control: Layer Isolation

High-Z Max Layer Isolation

Assigns a maximum 32-bit z-index (2147483647) to the stacking framework, ensuring secure isolation above all nested elements.

Z: 2147483647
CSS Architecture: Stacking Layer
10K+
Active Creators
99.9%
Uptime Score
4.9
User Rating
24/7
Elite Support
admin panel

WordPress Admin Control Panel

A React-powered admin dashboard built with @wordpress/element. Settings sync instantly to
the preview iframe and auto-save via debounced REST API calls.

Well-Structured Sidebar Architecture

A full-width dashboard pairs a live preview with a 7-category sidebar control panel featuring premium consistent UI patterns, resets, and the default hints.

Fields are rendered via static configuration arrays (IDENTITY_FIELDS, etc.), ensuring a data-driven interface.

Architecture: Data-Driven Component Rendering
Synced

Live Preview with PostMessage Bridge

Sidebar changes sync instantly to the iframe preview via postMessage(). A 150ms debounce prevents re-render lag while payloads carry settings to the live site URL.

A Replay button sends TGEMS_RESTART to cleanly re-trigger the iframe animation instantly, avoiding full page reloads.

Sync Engine: PostMessage + Debounced Effects
PANEL
PREVIEW
postMessage() @ 150ms

Responsive Multi-Device Live Preview

The dashboard includes a live preview viewport that toggles on the fly between Desktop (100%), Tablet (768px), and Mobile (390px) modes.

Perfect for inspecting font sizing, circular loader scales, message line wrapping, and glow intensities across various viewports.

Interface: Multi-Device Simulated Viewport
Viewport Matrix
Desktop Tablet Mobile
demo.trustygems.com
Loading...

Real-Time Sync Status Indicator

A tri-state sync indicator (Syncing, Synced, Error) tracks the save lifecycle. React hooks and AbortController manage transitions cleanly.

Settings auto-save via 1000ms debounced requests. Concurrent saves abort automatically, and a 500ms delay avoids UI flicker.

Status Engine: Tri-State Lifecycle Sync
Syncing... Saving to DB
Synced All Changes Saved
Save Error Retry Pending

Your Website Deserves

A Perfect First Impression

Next Generation WordPress Engine v3.0

Stop losing visitors to slow load times. Deploy the TrustyGems Premium Preloader and transform every page load into a cinematic experience — on any device, any connection, zero compromise.

220ms Flash Exit
Fully Responsive
Zero Conflict Code
Lifetime License
Clean Code
Get Instant Access
Watch Live Demo
Lifetime Access
Lifetime Updates
Subscription Free
One Time Payment
Expert support
user adjustable controls

Complete Control Panel Options

Sidebar control panel options, arranged precisely as they appear in the admin hierarchy.

Visibility Settings

Use ToggleControl switches to choose which pages show the preloader. Pages are dynamically fetched via REST API.

Display on Specific Pages — Per-page toggle list
Leave all unchecked → Shows on all pages
Home Page
About Us
Contact
Page Targeting: REST API + Toggle State

Identity & Branding

Define the site identity shown during loading. Inputs use a memoized component to prevent cursor jumps while typing.

Site Name — Default: TrustyGems
Loading Label — Default: Loading
1
TrustyGems
2
Loading
Input: DeferredInput with Memo Cache

Colors & Aesthetics

Adjust visuals via hex color pickers and a glow slider. Color settings use a regex-validated wrapper for native pickers.

Accent Color — Default: #6366f1
Background Color — Default: #0a0a0f
Glow Intensity — Range: 0 to 1, Default: 0.5
Accent
BG
0.5
Glow
ColorField: Hex Validation + Popover Picker

Ring Gradient Stops

Modify the rotating ring’s three-stop gradient. Each stop features an independent picker with compact layout and reset options.

Top Color — Default: #4338ca
Middle Color — Default: #6366f1
Bottom Color — Default: #a5b4fc
Gradient Config: 3-Stop Ring Mapping

Timing & Sequences

Set exact duration and fallback timeout values, validated for proper integer formatting and clamping.

Loading Duration — Default: 2500ms
Fallback Timeout — Default: 15000ms
Duration 2500ms
Fallback 15000ms
Timing: Numeric Validation + Clamping

Status Messages

Edit the 7 sequential loading messages individually. Saved as a parsed comma-separated string with JSON fallback support.

1 Initializing
2 Loading scripts
3 Fetching assets
4 Loading images
5 Building layout
6 Almost there
7 Welcome!
Messages: parseMessages() + Per-Slot Edit

Advanced & Maintenance

Toggle clean uninstall to automatically erase all plugin settings from the database upon deletion, eliminating data residue.

Delete Data on Uninstall — Default: Off
Delete data on uninstall Permanent DB cleanup on removal
Maintenance: Clean Uninstall Guard

Responsive Viewport Switching

A read-only showcase of 5 permanently active engine capabilities, displayed using disabled toggle controls.

Smart Scroll Locking
Glow Pulse Engine
Burst Milestones
ARIA Compliance
Stable Gutter Logic
5 / 5 Features Permanently Active
Engine Lock: Read-Only Toggle Array

Responsive Viewport Switching

Switch between three viewport modes to dynamically simulate breakpoints via CSS transitions, and re-trigger animations using the Replay button.

Desktop — Width: 100%
Tablet — Width: 768px
Mobile — Width: 390px
Viewport: Dynamic Width Morphing

Distraction-Free Fullscreen

Break out of standard WordPress constraints with a single click. Our immersive fullscreen mode maximizes your workspace, elegantly hiding sidebars and nav menus.

Standard WP Layout
Immersive Mode
DOM Expanding
Visual Demonstration

Loader Live Preview

A designated container for embedding a dynamic working preview video of the preloader later.

Video Player Container Placeholder

Ready to accept direct raw mp4 or iframe link.

Setup Guide

Follow these three simple steps to install and activate the Premium Preloader plugin on your WordPress website.

01

Download Plugin

Download the official Premium Preloader WordPress plugin ZIP file from your account dashboard.

02

Upload to WordPress

Navigate to Plugins > Add New in your WordPress admin panel and upload the provided ZIP file.

03

Activate & Configure

Click Activate Plugin and customize your premium preloader experience in the new settings panel.
Stay Connected

Find Us Everywhere

Join our growing community across all platforms and never miss an update, tutorial, or exclusive drop.

Twitter / X @TrustyGems
Follow
GitHub TrustyGems
Star Us
YouTube TrustyGems TV
Subscribe
Instagram @trustygems
Follow
© 2026 TrustyGems All rights reserved.
Crafted with for WordPress creators
Scroll to Top