Flowloader

Beautiful, customizable website preloaders for WordPress — no code snippets needed.

Built by Tobi Olusa Studio · Version 1.1.0

---

Overview

Flowloader replaces the old workflow of manually pasting HTML/CSS/JS preloader snippets into WPCode or functions.php. It provides a premium admin dashboard where you pick a preloader style, configure colors, timing, and content, preview it live, and save — that's it.

---

Installation

1. Upload the flowloader/ folder to /wp-content/plugins/.
2. Activate the plugin via Plugins → Installed Plugins.
3. Go to WordPress Admin → Flowloader to configure.

---

Features

Preloader Types

Key	Name	Description
spinner	Circular Spinner	Minimal rotating ring
text	Minimal Text	Centered text with dot bounce
staircase	Staircase Reveal	Vertical strips sweeping up
percentage	Percentage Counter	Animated 0–100 counter
logo	Logo Reveal	Uploaded logo scales in
marquee	Marquee Scroll	Infinite scrolling text
split	Split Screen	Two panels open left/right
image_sequence	Image Sequence	Background image cycling
blur	Blur Reveal	Page sharpens after load
custom	Custom HTML/CSS/JS	Paste your own code

Settings

Setting	Description
Enable Preloader	Global on/off toggle
Preloader Type	Choose from 10 styles
Random Mode	Different style on each load
Background Color	Overlay background
Text Color	Text and labels
Accent Color	Spinner, dots, highlights
Logo	Upload via WP media library
Loading Text	Editable in all text-based types
Animation Speed	0.1–3s
Fade Duration	0.1–2s overlay exit
Min Display Time	Ensure preloader shows for at least N ms
Scroll Lock	Prevent scrolling during preload
Schedule	Date range activation
Custom HTML/CSS/JS	Full code control

---

Live Preview

Click Preview in the top-right of the admin panel to see your current settings rendered before saving.

---

Import / Export

Use the Import / Export section to:

• Export — download flowloader-settings.json for backup or use on another site.
• Import — upload a previously exported file to restore settings.

---

Per-Page Preloaders (Developer Extension)

The page_rules setting accepts an array of post_id => preloader_type entries. This can be managed programmatically:

$settings = get_option('flowloader_settings', []);
$settings['page_rules'][42] = 'logo'; // Use logo preloader on page ID 42
update_option('flowloader_settings', $settings);

---

Compatibility

• ✅ Elementor
• ✅ Gutenberg
• ✅ Kadence Theme
• ✅ Bricks Builder
• ✅ WooCommerce
• ✅ Astra, GeneratePress, Hello, Storefront

---

Custom Preloader Code Example

Set type to Custom HTML/CSS/JS and paste in the Custom Code section:

HTML:

<div class="my-loader">
  <svg><!-- your SVG animation --></svg>
  <p>Getting ready…</p>
</div>

CSS:

.my-loader { text-align: center; color: #fff; }

JS:

// Runs after preloader dismisses
console.log('Site loaded!');

---

File Structure

flowloader/
├── flowloader.php              ← Plugin entry point
├── README.md
├── includes/
│   ├── class-core.php          ← Bootstrap singleton
│   ├── class-installer.php     ← Activation / defaults
│   ├── class-settings.php      ← Option CRUD
│   ├── class-frontend.php      ← HTML injection + enqueueing
│   └── class-admin.php         ← Admin menu + form handlers
├── admin/
│   ├── css/admin.css           ← Premium dark admin UI
│   ├── js/admin.js             ← Admin interactions
│   └── views/
│       └── settings-page.php   ← Admin page template
└── assets/
    ├── css/frontend.css        ← All 10 preloader styles
    └── js/frontend.js          ← Renderer + dismiss logic

---

Hooks & Filters

// Disable preloader on a specific page
add_filter('flowloader_should_load', function($load) {
    if (is_page('contact')) return false;
    return $load;
});

Note: Add this filter support by patching Frontend::should_load() to call apply_filters('flowloader_should_load', $result) before returning.

---

Performance Notes

• Assets only load on the frontend (not admin).
• Uses window load event — preloader dismisses as soon as the page is fully loaded.
• minDisplay prevents a flash-of-no-preloader on fast connections.
• No jQuery dependency.
• Total asset weight: ~8 KB CSS + ~5 KB JS (unminified).

---

License

GPL-2.0+ — free to use on unlimited client sites.

---

Flowloader — Macduff Studio