Here’s another jQuery plugin, JavaScript progress bar with percentage. This jQuery plugin is supposed to create a vertical and horizontal scroll progress bar that retrieve as the user scrolls down the webpage.
JavaScript progress bar with percentage plugin is planned to create a visual reading progress indicator that is be responsible for keeping the track of the present reading position of an article, post or page.
Html Markup
<div class="scrollBar1"><span></span></div>
<div class="scrollBar2"><span></span></div>
CSS:
CSS styles for scroll progress bar.
.scrollBar1 {
position: fixed;
top: 95vh;
height: 2px;
width: 0%;
background: goldenrod;
-webkit-transition: width 200ms var(--timing);
transition: width 200ms var(--timing);
text-align: right;
color: #fff;
}
.scrollBar1 span {
position: absolute;
top: -23px;
right: 15px;
font-size: 0.7em;
font-weight: 500;
display: block;
text-align: center;
}
.scrollBar1 span::after {
content: "%";
font-size: 0.8em;
position: absolute;
right: -15px;
bottom: 4px;
font-weight: 700;
opacity: 0.4;
}
.scrollBar2 {
position: fixed;
top: 0;
right: 2vw;
height: 0%;
width: 10px;
background: #49e;
-webkit-transition: height 200ms var(--timing);
transition: height 200ms var(--timing);
text-align: right;
color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
border-radius: 1em;
}
.scrollBar2 span {
position: absolute;
bottom: 3px;
left: 2px;
font-size: 0.7em;
font-weight: 500;
display: inline-block;
text-align: left;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom left;
}
.scrollBar2 span::after {
content: "%";
font-size: 0.8em;
position: absolute;
right: -15px;
bottom: 4px;
font-weight: 700;
opacity: 0.4;
}
JS
Load the required jQuery library
<script src="/path/to/cdn/jquery.slim.min.js"></script>
$(document).scroll(function (e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
// For scrollbar 1
$(".scrollBar1").css("width", scrollPercent + "%");
$(".scrollBar1 span").text(roundScroll);
// For scrollbar 2
$(".scrollBar2").css("height", scrollPercent + "%");
$(".scrollBar2 span").text(roundScroll);
});