Skip to main content

Preloader — Playground

Appearance
Timing
so it never just flashes
Theme Settings values — update as you tweak
// Theme Settings → Animations → Preloader
'animation_preloader' => [ 'enable' => 'yes' ],
'preloader_style'  => [ 'style' => 'spinner' ],
'preloader_bg'     => [ 'predefined' => '', 'custom' => '#0b1220' ],
'preloader_accent' => [ 'predefined' => '', 'custom' => '#2f74e6' ],
'preloader_min'    => 0.4,
'preloader_fade'   => 0.5,

Pick a style (on the right) and set the colours, logo and timing. Everything here runs the real module — the same overlay markup, the .upw-pl-* classes, the --pl-* variables, and the counter / progress-ring ramp — so what you see is what ships. On a real site the loader is full-screen until the page is ready; here it's contained in the box and loops so you can watch it. Hit ↻ Replay to run it again. The Theme Settings values update as you tweak.

Where it lives

The Preloader is site-wide — configure it under Theme Settings → Animations → Preloader (not per element). It shows until the page's load event (kept up for at least the minimum display so it never just flashes), then fades — or the Curtain slides — away. Pure CSS animations, front-end only.

← Back to Preloader