Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Progress Bar / Scroll / Scrolltop

Scrolling Progress Bar

Post a Comment
What I'm trying to do is implement a progress bar to indicate how close one is to the end of the page in vanilla JavaScript. However, I'm running into a few issues. First of all, a

Solution 1:

Please see the changes I have applied to your CODEPEN

body {
	height: 300vh;
	background: black
}

footer {
	width: 100vw;
	height: 20px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff
}

#footer__progress_bar {
	height: 20px;
	background: blue;
	width: 0%;
  text-align: center
}
<footer><divid="footer__progress_bar">0%</div></footer><script>window.onscroll = function() { ScrollIndicator() };

functionScrollIndicator() {
	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var scrolled = (winScroll / height) * 100;
	document.getElementById( 'footer__progress_bar' ).style.width = scrolled + "%";
	document.getElementById( 'footer__progress_bar' ).innerHTML = Math.round( scrolled ) + "%"
}
</script>

Solution 2:

You can use the PrognRoll jQuery plugin:

Examples

Body demo on CodePen

<body><!-- Content --></body>

Display a scroll progress indicator:

$(function() {
  $("body").prognroll();
});

or create a scroll indicator with CSS and JavaScript (without plugin).

See the live example below:

window.onscroll = function() {
  ScrollIndicator()
};

functionScrollIndicator() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("headerBar").style.width = scrolled + "%";
  console.log(Math.round(scrolled * 100) / 100);
  document.getElementById("footerBar").style.width = scrolled + "%";
  document.getElementById("footerBar").innerHTML = Math.round(scrolled) + "%";
}
body {
  height: 2000px;
  text-align: center;
  font-family: arial;
  color: #333;
  margin: 0px;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.headerh2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: linear-gradient(141deg, #0fb8ad0%, #1fc8db51%, #2cb5e875%);
  width: 0%;
}

.content {
  padding: 50px0;
  margin: 50px auto 0 auto;
  width: 80%;
}

footer {
  width: 100vw;
  height: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ccc;
}

.footer-progress-bar {
  height: 20px;
  background: linear-gradient(141deg, #0fb8ad0%, #1fc8db51%, #2cb5e875%);
  width: 0%;
  text-align: center
}
<divclass="header"><h2>Scroll Indicator</h2><divclass="progress-container"><divclass="progress-bar"id="headerBar"></div></div></div><divclass="content"><h2>Scroll down to see how it works</h2></div><footer><divclass="footer-progress-bar"id="footerBar">0%</div></footer>

Post a Comment for "Scrolling Progress Bar"