Creating Scroll Indicator With JavaScript

It is a way to create a responsive scroll indicator from the beginning to the end of the blog page to customize and beautify the look of a blog. This is a line at the top of the blog page that shows where you are on the page with a scroll indicator.

This scroll indicator is displayed in color, hidden at the top of the blog page, so that when the page scrolls down, the indicator scrolls to the right, and when the page is scrolled up, the scroll indicator scrolls to the left.

Blogger Reading Progress Bar Indicator

The scroll indicator is built with just a few lines of pure (raw) javascript. Therefore, you don't need to use any JS library (scripting).

If you are using a scroll indicator on your blog site and it affects the page load speed and increases the number of page queries, I recommend you to use this plugin. Especially if there are too many scripts on the blog site, it will be more beneficial to use this type of javascript.

Add the following CSS codes to your blog site's style (<style>) file.

.progress-container {
    background:#24272e;
    position:fixed;
    width:100%;
    height:3px;
    ball:0;
    left:0;
    z-index:9999
}
 .progress-bar {
    background:#f44336;
    width:0%;
    height:3px
}

You can change the color codes specified in the CSS code to match the background color of your blog site.

.progress-container is where the scroll indicator is, and .progress-bar is the scroll indicator that scrolls from left to right.

Add the following HTML and javascript code one line above </body>.

Source Code:

<div class="progress-container">
    <div class="progress-bar" id="progress" />
</div>

<script>
//<![CDATA[
window.addEventListener("scroll", scrollBar);

function scrollBar() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("progress").style.width = scrolled + "%";
}
//]]>
</script>

Final Words

That's all. For more information and comments about the blog scroll indicator, you can use the comment form.