PreloadX – Custom Preloader

Description

Enhance your WordPress site with a fast, modern, and fully customizable preloader experience.

PreloadX allows you to seamlessly integrate a lightweight loading screen into your WordPress website. Choose from 17 high-performance, pure-CSS preloader styles—ranging from classic spinners to futuristic 3D orbits and vector laser loops. Customize the background with solid colors, sleek gradients, or custom images, and tailor the preloader’s accent color, size, and typography with real-time live preview.

Designed with modern web performance in mind, PreloadX features zero external dependencies, no heavy third-party scripts, and vanilla JavaScript for ultra-fast loading without slowing down your site.

🎨 17 Available Preloader Styles

PreloadX organizes loaders in a clean, logical progression from classic essentials to advanced 3D animations and brand assets:

1. Classic Spinner: Clean, lightweight circular border spinner.
2. Pulse Ring: Expanding soft radial pulse ring with fading opacity.
3. Double Bounce: Dual harmonic bouncing spheres that scale in counter-phase.
4. Wave Dots: Three rhythmic bouncing dots in a smooth sine wave pattern.
5. Spinning Square: 3D tumbling geometric square plane with perspective flip.
6. Rotating Chase: Sophisticated circular array of orbiting and chasing dots.
7. Real Progress Bar: True linear page progress track with live percentage indicator.
8. Equalizer Wave: Audio frequency rhythm wave bars pulsing dynamically.
9. Morphing Fluid Blob: Organic, shape-shifting fluid liquid blob animation.
10. Infinity Loop: Luminous laser tracing a figure-8 path with glowing comet trails.
11. 3D Isometric Cube: Futuristic 3D tumbling and folding isometric blocks.
12. 3D Celestial Orbit: Glowing planetary nucleus with three tilted 3D elliptical orbits and orbiting satellites.
13. Neon Radar Scanner: High-tech circular radar sweep with range grid and glowing center blip.
14. Cinematic Text Reveal: Modern clip-path typography reveal for custom loading phrases.
15. SVG Outline Drawing: Dynamic stroke outline mask drawing of uploaded SVG shapes or logos.
16. Custom Image / Logo: Pulsing custom brand logo or image.
17. None (Disabled): Turn off the preloader without deactivating the plugin.

⚡ Key Features & Capabilities

• Responsive Sizing (% and px): Seamlessly toggle between Responsive Percentage (10% - 200%) for automatic scaling across all screen sizes, and Fixed Pixels (20px - 400px+) for exact branding measurements.
• Corner Radius Control: Fine-tune the corner softness (0px - 40px) for square, cube, equalizer, progress bar, and custom image loaders.
• Typography Scaling: Direct slider control (12px - 48px) over typography sizes for Text Reveal and Progress Bar loaders.
• Custom Color & Background Options:
  • Solid Color: Pick any background color using the native color picker.
  • Gradient Background: Enter any valid CSS linear or radial gradient for modern aesthetics.
  • Background Image: Set any image URL for full-screen cover loading backgrounds.
  • Preloader Accent Color: Live color picker to adapt foreground animations to your brand.
• Advanced Display Rules:
  • Hide on Mobile: Automatically disable the preloader on mobile devices (wp_is_mobile()) to ensure instantaneous mobile performance.
  • Show Only on Homepage: Restrict the preloader strictly to your site’s front page/home page, keeping subsequent internal page clicks instant.
• Cinematic Exit Animations: Choose how the loading screen transitions out when the page finishes loading:
  • Fade Out (smooth opacity dissolve)
  • Slide Up (curtain lifts upward)
  • Split (horizontal center-split reveal)
  • Diagonal Wipe (cinematic angled wipe transition)
  • Scale Out (modern zoom-in fade transition)
• Minimum Load Time: Guarantee the preloader displays for at least a specified duration (e.g., 500ms, 1000ms) to avoid jarring screen flashes on fast connections.
• Fallback Close Button: Optional dismiss button so visitors can close the preloader manually if a third-party asset hangs.
• Modern Full-Width Dashboard: Clean, card-clickable selection interface with real-time live preview and zero radio-button clutter.
• Zero External Dependencies: 100% self-contained pure CSS and Vanilla JavaScript (No jQuery dependency on public pages).
• Compatible with All WordPress Themes: Works with classic themes, block themes, and major page builders (Elementor, Divi, Beaver Builder, etc.).