Scroll Progress Bar in Oxygen under 2 minutes

This technique requests Scripts Manager feature by Swiss Knife or Scripts Organizer to quickly import a script.

Register Script

We will start by going into Script Manager feature and paste CDN link or Upload it to media library to store it on our server.

Give it a name, Script Type set as JavaScript, Location for best performance set as footer as any other script and Include type set as Register if you don't want that that script is triggered on any page on the website.

Script URL: https://rawcdn.githack.com/flackr/scroll-timeline/94866999efe41b3ccba846be7ed37c9313dd880e/dist/scroll-timeline.js

Scripts Manager by dPlugins

Oxygen Builder

Add Code Block and add class to the code block .progress-bar--scroll ( never mind where on the page as it is going to be fixed position )

scrollbar

Include Script

Go back to the Scripts Manager and copy Code

screenshot 2021 11 04 at 22.08.43

Code will look something like this depending on your scripts title

wp_enqueue_script('scroll-script');
Code language: PHP (php)

Paste it inside Code Block > PHP Section

Style Bar

.progress-bar--scroll { position: fixed; z-index: 10; left: 0; top: 0; width: 100vw; height: 10px; transform-origin: 0 50%; transform: scaleX(0); background: rgb(0, 255, 200); }
Code language: CSS (css)

Paste it inside Code Block > CSS Section

Trigger Script

// Create ScrollTimeline const myScrollTimeline = new ScrollTimeline({ source: document.scrollingElement, scrollSource: document.scrollingElement, orientation: 'block', scrollOffsets: [ new CSSUnitValue(0, 'percent'), new CSSUnitValue(100, 'percent'), ], }); // Animate Progress Bar on Scroll document.querySelector(".progress-bar--scroll").animate( { transform: ["scaleX(0)", "scaleX(1)"] }, { duration: 1, fill: "forwards", timeline: myScrollTimeline } );
Code language: JavaScript (javascript)

Preview demo

Marko Krstić

Owner of dPlugins. Started with design in 1999. Currently, besides dPlugins, he is an Art director at Scandic Hotels, delivering design for the Web and the App for 270 Scandinavian hotels.
flywheel grey
Great load time is only possible with powerful hosting. Purchase it  now.