How to find the right company for commercial cleaning in Erbil - Iraq? With the current global pandemic situation, work […]
About the author: Ninos
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.
Posted
3 months ago on April 8th, 2020.
Related To:
Related Posts
How to Create Before & After Slider in Oxygen
Before & After slider is a cool effect, used to provide a real-time sense of comparison of two images. If […]
Title With Lines On Sides in Oxygen (CSS Only)
Working on a website, I needed to create a title with lines on sides. A sort of text-decoration-cool-design-thing. That looks […]
Reply to Comments in Oxygen with Rank Math
A quick fix for reply to comments in Oxygen sites running Rank Math plugin. Using a simple line of code.
Revealing Footer in Oxygen (CSS Only)
Revealing footer of a website is a nice effect, we used it on our Web design for startups page. The […]
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.
Do we all agree that Coffee is the fuel that feeds the free content creating?
Is 2020 a Good Time to Start a Career in Tech?
In terms of demand, the tech field has become what in the past used to be the stock market. Back […]
Interview & Business Lessons From Paul's Hair Port
It is a remarkable milestone when a business celebrates its 20th year anniversary in business. Paul’s Hair Port, located in […]
Should You Trust Kuraz Insurance Company in Erbil?
Kuraz insurance company based in Erbil. Claims to be professionals in the business of ensuring your health, assets, travel, and […]
How to Create Before & After Slider in Oxygen
Before & After slider is a cool effect, used to provide a real-time sense of comparison of two images. If […]
Title With Lines On Sides in Oxygen (CSS Only)
Working on a website, I needed to create a title with lines on sides. A sort of text-decoration-cool-design-thing. That looks […]
How to Create Animated Number Counters in Oxygen
Animated number counters are seen on many landing pages. They bring a cool effect (movement) to the page and convey […]