Scroll Progress Bar in Oxygen under 2 minutes

Marko Krstić
4 Nov 2021

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:

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 )


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 the title of your script. Paste it inside Code Block > PHP Section


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
		transform: ["scaleX(0)", "scaleX(1)"]
		duration: 1, 
		fill: "forwards", 
		timeline: myScrollTimeline 

Preview demo

Was this article helpful?



Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy