JavaScript Progress Bar with Percentage

JavaScript Progress Bar with Percentage

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);
});