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

Related To:

Tags: |
Why is a Business Plan Necessary for Business

A business plan is a map of your company's future. It's your strategy and vision for how your business will develop. You'll use it to identify the risks you face, and how you can turn those risks into opportunities. You'll also use

10 Tips Will Help You to Improve Your Content Writing Skills

Learn the fundamentals of content marketing, copywriting and SEO in this online course. You'll get actionable tips and learn how to create a content strategy that balances your business needs with your readers' preferences.

The 10 Best Types of Videos for Social Media

Video is arguably the best way to capture your audience's attention. And with social media platforms, like Facebook and Instagram, pushing viewers to watch videos on their mobile devices, it's more important than ever for marketers to be aware of the types of videos

Project Management Tools in Google Docs

Google adds free project management features to Google Docs and they're pretty cool - including Product Roadmap!

How to Create a Thank You Card in 5 Simple Steps

Instant messaging, internet speak, and the immediacy that social media provides have made sending cards feel like an old-school form […]

8 Ways To Balance Your Work And Personal Life

In order to make your life easier and better you should have a healthy balance between your work and personal life. It is important to keep these

The Future of 3D Smartphone Technology

The world of smartphone technology is constantly evolving, and the latest trend is in 3D. Find out how it works and what it means for the future of smartphones.

The Benefits of Design and Marketing Working Together

Successful collaboration between marketing and design often brings exceptional results. But, if this relationship is not functional, it could be one primary reason you might fail to hit your goals.

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.

Do we all agree that Coffee is the fuel that feeds the free content creating?