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 3 years ago on April 8th, 2020.

Related To:

Tags: |
4 Benefits of Outsourcing Your Payroll

Did you know that you can outsource your payroll? Many business owners are hesitant to outsource this vital task, but doing so has many benefits. Here are four benefits to outsourcing your payroll.

How Can 3D Animated Logos Increase Brand Relevance?

Every company strives to please its consumers. A business uses its resources and strengths to amplify sales, recognition, and growth. […]

Integrating Artificial Intelligence in Mobile Apps Development

Mobile app development is a process of creating mobile apps with the use of computer programming languages, tools and software. […]

Why is PHP Still Important for Web Development?

PHP is one of the most popular programming languages and has been around for over two decades worldwide. PHP has […]

AI vs Machine Learning: What are the Differences?

Within the last decade, the term AI vs machine learning has become buzzwords that are often discussed together, and the […]

A Comprehensive Guide to Creating a Compelling Whiteboard Animation Video

Have you ever seen videos where it appears as though someone is discussing something while writing a story on a […]

8 Reasons Why You Should Hire Remote Workers

As the world moves through its third year of the pandemic, remote working is here to stay as it revolutionises […]

How To Start An Online Business As A Student

Many of you pursuing student life have a high desire to do jobs. In this case, you can’t get enough […]

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.

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 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.