scroll progress bar

Sasuke Khan answered on April 16, 2022 Popularity 9/10 Helpfulness 4/10

answer scroll progress bar

scroll progress bar

Comments(1)

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

.progress-container {
  background-color: blue;
  height: 10px;
  width: 100%;
}

#progressBar {
  background-color: red;
  height: 10px;
  width: 0%;
}

function progressBarScroll() {  let winScroll = document.body.scrollTop || document.documentElement.scrollTop,      height = document.documentElement.scrollHeight - document.documentElement.clientHeight,      scrolled = (winScroll / height) * 100;  document.getElementById("progressBar").style.width = scrolled + "%";}window.onscroll = function () {  progressBarScroll();};

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: codepen.io

Tags: progress-bar scroll whatever

Link to this answer
Share Copy Link

Contributed on Apr 16 2022

Sasuke Khan

0 Answers Avg Quality 2/10

scroll progress bar

Contents

More Related Answers

scroll progress bar

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.