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

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 )

Include Script

Go back to the Scripts Manager and copy Code

Code will look something like this depending on the title of your script. Paste it inside Code Block > PHP Section

wp_enqueue_script('scroll-script'); 

Style Bar

Paste it inside Code Block > CSS Section

.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);
}

Trigger Script

Paste it inside Code Block > JavaScript Section

// 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 
	}
);

Preview demo