PIT Designs Logo

Scroll Progress Bar Indicator in Oxygen

About the author: Ninos
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 6 months ago on April 8th, 2020.

Related To:

Tags: |

Bloggers and online content creators use posts to reach thier audience. And just like with everything visual today, the user experience (UX) is key. One way to improve the visual of your blog posts, is by including a scroll progress bar.

What's a scroll progress bar indicator?

The scroll progress bar indicator, is the horizontal line on top of the page. That moves according to your position within the post. (Showing how far down you've scroll) or how much of the article is left.

How to create Scroll Progress Bar Indicator in Oxygen Builder / WordPress / using CSS and JS

Total Time: 5 minutes

Add Code Block

First of all, open the single post template in Oxygen builder. Assuming you're adding this to the Blog posts only. However you can add it to any post type.

Add on top of the structure a Code Block.

Code Block Settings

Go to Advanced > Layout > Position : Fixed

Add Class & ID

add-class-and-ID

Add CSS Class to the Code Block: bar-line
Add CSS ID to the Code Black: bar-header

Add CSS Code

Now add this code to the CSS of the same Code Block:
.bar-line {
height: 8px;
background: #00A99D;
width: 0%;
z-index: 1;
}

Change the background color as desired.

Add JS Code

window.onscroll = function() {oxyScrollFunc()};
function oxyScrollFunc() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("bar-header").style.width = scrolled + "%";
}


And there you have it. A nice scroll bar indicator for Oxygen Builder based posts. With simple CSS and JS.

5/5 (1 Review)
Do we all agree that Coffee is the fuel that feeds the free content creating?
How to Choose Professional Fonts for Web Design

Fortunately, the days when fonts and colors were chosen at random have long passed. Now each element of the site […]

How to Write Design Brief for Web Design Projects

Got a big web design project coming up? Then you'll need a great design brief for web design, to carry […]

Adobe CC Updates Focused on Collaboration & Remote Work

Adobe's June updates to its Creative Cloud suite comes with changes directly aimed at making collaboration and remote-work better and […]

6 Ways Erbil International Hotel Complies with COVID-19 Safety

Erbil International Hotel, have activated the "Health and Safety program" which ensures customers, from the moment they enter the property until leaving.

Starting Online Business in Iraq

As part of our business launching & partnership programs. We help you kick start your project online, and start making […]

Drawing Anatomy & Art: A Place for Artistic Freedom

Art, in its broadest sense, is a form of communication. It's been known and shown throughout history how mankind used […]

How to Choose Commercial Cleaning in Erbil

How to find the right company for commercial cleaning in Erbil - Iraq? With the current global pandemic situation, work […]

Leave a Reply

Your email address will not be published. Required fields are marked *

chevron-downmenu-circlecross-circle