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

Related To:

Tags: |

pCloud Lifetime 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?
4 Solutions for Alternative Investment Firms

Alternative investments have increasingly become accessible to investors. Therefore, knowing about them is essential for industry professionals and investors. It […]

Promote Your Way to Profits in 5 Ways

Are you operating a business that seems like it's stuck in the summer doldrums? If earnings, sales, and profits aren't […]

Modern & Effective Strategies to Boost Your Business

There are multiple operations in a business that you have to check out thoroughly for the smooth running of a […]

Why Is HTTPS Important and How to Add It Easily for Free to Your Website?

In August 2014, Google created ripples in the webmaster community by stating that its algorithms would henceforth treat HTTPS as […]

How to Get the Best Legal Translation Help in Business

Different people around the world understand only their native language. It would become difficult for them to communicate with people […]

Using SalesBlink To Automate Cold Outreach

SalesBlink is an all-in-one cold outreach platform. But this isn't just another tool for email marketing. SalesBlink helps you automate […]

Common Branding Mistakes You Have To Avoid And How To Do Deal With Them

There are things which you need to avoid to make sure that your brand will become strongly competitive. Hire one of the top branding agencies to avoid branding failures. Continue to read for more details

Leave a Reply

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

menu-circlecross-circle