Top Progress Bar

Top bars are beautiful looking lines at the top of a website. A colored top bar would not do any harm. Instead, it increases the beauty of your website (if used correctly). Read to know how I have implemented it in my websites.

If you did not then hit refresh. This page shows page loading progress as a top bar. This gives users an idea of whether the page has fully loaded or not. The code pretty small and no jQuery required.

Before we generate one, we have to call the javascript that we just downloaded. Copy the progressbar.min.js file your project or website folder(may be inside /js folder).

Now call it using a script tag. If you are using Jekyll and you want top bar to show page load progress on all the pages, then do these steps on default.html or the default layout.

<script src="/path/to/progressbar.min.js"></script>

If you want to change the looks of the bar then you should give it a class or id. Here is how we can do it. We are also generating a new Nanobar with some options which define the length of the bar.

var options = {
    classname: 'my-class',
    id: 'my-id'
};
var progressbar = new Progressbar( options );
progressbar.go( 30 );
progressbar.go( 76 );
progressbar.go(100);

Give top progress bar a color that suits the scheme of your website. It is better to give it a contrasting dark color in order to highlight the bar.

.my-class .bar {
    background:#f04c78;
}

The output html of the top bar looks like this. So you can always customize .bar class inside .my-class to give it a color, increase the height etc…

<div class="progressbar my-class" id="my-id" style="position: fixed;">
    <div class="bar"></div>
</div>

A progress bar which shows the vertical length of a page on a horizonal bar dynamically is called a scroll percentage bar. You can observe the scroll percentage bar at the bottom of this page. This bar uses the latest CSS variables.

<!-- Copy this to a css style sheet or to the head section -->
<style>
.progress-bar {
    background: linear-gradient(to right, red var(--scroll), transparent 0);
    background-repeat: no-repeat;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    z-index: 1;
}
</style>

<!-- This is the bar which shows scroll percentage -->
<div class="progress-bar"></div>


<!-- Script used to generate --scroll variable with current scroll percentage value -->
<script>
var element = document.documentElement,
    body = document.body,
    scrollTop = 'scrollTop',
    scrollHeight = 'scrollHeight',
    progress = document.querySelector('.progress-bar'),
    scroll;

document.addEventListener('scroll', function() {
    scroll = (element[scrollTop]||body[scrollTop]) / ((element[scrollHeight]||body[scrollHeight]) - element.clientHeight) * 100;
    progress.style.setProperty('--scroll', scroll + '%');
});
</script>

Try mplementing top bar on your website and let me know how it went.

🐘 Thanks for reading!