PIT Designs Logo

Scroll Progress Bar Indicator in Oxygen

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


Posted 8 months ago on April 8th, 2020.

Related To:

Tags: |

Up to 35% OFF AliDropship Plugin

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?
Website Copyright Laws for Online Business

If you are starting a business and are working to build and promote it, there are some important things to […]

Wave Video for Social Media Video Marketing

Social media video marketing is the hottest trend and the most effective marketing tool. It helps reach masses of the […]

How Good UX is Designing A Better Future For Online Shopping

Why so many consumers prefer shopping online in 2020? The obvious answer is ‘coronavirus’, but it’s not as simple as […]

How to Start a Successful Online Business

Creating an online business is an exciting endeavour, but it can feel a little overwhelming if you are unfamiliar with […]

5 Benefits of Professional Commercial Cleaning Service

People spend a lot of their time at workplaces, which is why it is essential to keep the workplaces clean […]

5 Tips on Creating Marketing Videos on a Budget

Video marketing is the way forward. Businesses that are failing to leverage the power of video marketing are falling behind […]

Five Essential Law Firm Website Requirements

Five Essential Law Firm Website Requirements The best law firm website is one that lets you accomplish the key purpose […]

Leave a Reply

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

chevron-downmenu-circlecross-circle