How to add a progress bar to your website: a detailed guide

a progress bar on the website created using HTML, CSS and JavaScript

Progress bar is one of the most useful web design tools that allows users to get a visual representation of the process of loading or performing a certain action on a website. It can be used to show the progress of a page loading, form submission, content loading, or any other process that takes place on a website. In this article, we will consider the case when the progress bar at the top of the site displays the progress of the viewed page content when it is scrolled.

Video: this is how the progress bar will look like when you scroll the page

A progress bar can have different looks and styles, depending on the design of the website. It can be horizontal or vertical, coloured, or use certain effects, such as animation or transition effects. The main purpose of a progress bar is to provide the user with clear information about how far they are in the process of completing a particular task.

How to add a progress bar to a website?

So, let's move on to adding a progress bar to your website. To do this, we need to use HTML, CSS, and JavaScript code.

First, in the position of the site (template) where you want to display the progress bar, you need to add the following HTML code:

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

Then we add the CSS code to the style file of your site:

.progress-bar {
    background: #ff4163;
    height: 10px;
    width: 0%;
    position: fixed;
    top: 0;
    z-index: 1;
}

Note Of course, if you don't like the color of the bar or its thickness, you can change them to what you want in these styles.

And finally, there is the JavaScript code. You need to insert it between the tags <head> </head> of your website:

<script type="text/javascript">
window.addEventListener('scroll', handleScroll);

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

Conclusion

A progress bar is an important element of web design that provides the user with visual information about the progress of a task or process. Regardless of its appearance and style, the main purpose of a progress bar is to provide the user with clear information about how far they are in the process of completing a particular task. Given these benefits, it is recommended to add a progress bar to your website to improve the user experience.