Millennials and Gen Y are the most socially responsible generations. Their zeal for social responsibility reflects in their penchant to […]
The best free alternative to Grammarly : ProWriteAid

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.
Table of Contents
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 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.
Easy Tips to Maintain Your WordPress Site

We love WordPress. It's the leading CMS for creating websites. Here are some Easy Tips to Maintain Your WordPress Site
COVID-19 and E-Learning Trends

The COVID-19 pandemic took the world by surprise, and what is even more surprising is that it's 2021 and the […]
5 Easiest Ways to Create Your Ecommerce Website

You can make an ecommerce website for a brick or a packet of tablets. But what is important is how […]
Proven Tips How to Improve Your Content Strategy with Influencer Marketing

One of the best ways to improve your content marketing is with influencer marketing strategy. This will help you reach […]
How to Increase Brand Awareness with Digital Content Marketing

The digital world is more powerful than ever – and its power keeps growing. If you want to survive in […]
Why is Ethical Leadership Important in Business

How many times have we come across peer pressure and do ethically wrong things? Or Like probably favor a candidate […]