Creating the progress bar is a much simpler task than it sounds. All that is needed is a good creative touch with CSS and the basics of Javascript to get the bar functioning with user input or after the page has fully loaded and is beginning the process being recorded. Let’s start with the basic HTML and CSS structure of the progress bar.

// The HTML
<div id="progressbar">
<div id="loading"></div>
<div id="value"></div>
</div>
 
// The CSS
#progressbar {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
background: lightgrey;
}
 
#loading {
width: 1%;
height: 25px;
background: green;
}
 
#value {
position: absolute;
right: 10px;
}
// The Javascript
var i = 0;
function isProgressing() {
    if (i == 0) {
        i = 1;
        var elem = document.getElementById("loading");
        var val = document.getElementById("value");
        var width = 0;
        var id = setInterval(frame, 1);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
                i = 0;
            } else {
                width++;
                elem.style.width = width + "%";
                val.innerHTML = width  + "%";
            }
        }
    }
}

Here is the working example to play around with and see how the elements work together. Once we begin a process we can update the script to increment the loading of the progress bar with the percentage and visual bar display.