Skip to main content

Scroll Progress — Playground

drag the scroll on the right to simulate scrolling
Bar — options
Theme Settings values — update as you tweak
// Theme Settings → Animations → Scroll Progress
'animation_scrollprog' => [ 'enable' => 'yes' ],
'scrollprog' => [
    'kind' => 'bar',
    'bar' => [
            'position' => 'top',
            'color' => [ 'predefined' => '', 'custom' => '#2f74e6' ],
            'thickness' => 4,
            'hide_top' => 'yes',
    ],
],

Colors use the theme color-preset picker (they store [ 'predefined' => '', 'custom' => '#hex' ]); the resolved color is shown here.

Pick a style on the right, then drag the vertical scroll on the stage's right edge to simulate scrolling — the indicator fills exactly as it does on a real page. This runs the real module — each family's own builder and its update(progress) function, plus the verbatim .upw-sp-* CSS. On a live site the progress is the page-scroll fraction; here it's driven by the slider. The Theme Settings values update as you tweak.

Where it lives

Scroll Progress is site-wide — configure it under Theme Settings → Animations → Scroll Progress (a page-level indicator, not a per-element effect). Pure self-contained JS/CSS, loaded only when enabled, and only the one family you pick.

← Back to Scroll Progress