Coder Wrap provides free to use snippets

Preview Source Code

(1)

HTML




CSS
h1{
  font-size: 38px;
  text-align: center;
  padding: 30px;
}
p{
  font-size: 15px;
  line-height: 1.5em;
}
#progress{
  width: 65px;
  height: 65px;
  background-color: #c0c0ff;
  border-radius:50%;
  position: fixed;
  bottom: 20px;
  right: 10px;
  box-shadow:0 0 10px rgba(0,0,0,0.2);
  display: grid;
  place-items:center;
}
#progress-value{
  display: block;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  background-color: #fff;
  border-radius:50%;
  display: grid;
  place-items:center;
}





JS
const scrollPercentage = ()=>{
  const scrollProgress = document.getElementById("progress");
  const progressValue = document.getElementById("progress-value");
  const pos = document.documentElement.scrollTop;
  const calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollValue = Math.round( pos * 100 / calcHeight);
  scrollProgress.style.background = `conic-gradient(#000 ${scrollValue}%, #c0c0ff ${scrollValue}%)`
}

window.onscroll = scrollPercentage;

Scroll Percentage

Scroll percentage is a measure of how far a user has scrolled down a webpage, expressed as a percentage of the total scrollable height of the page. For example, if a webpage is 1000 pixels in height and a user has scrolled 500 pixels down, the scroll percentage would be 50%.

Scroll percentage can be used to trigger certain actions or animations on a webpage, such as displaying a fixed navigation bar, loading more content as the user scrolls down, or showing a progress bar to indicate how far the user has scrolled.

There are various ways to calculate the scroll percentage using JavaScript. One approach is to use the window.scrollY property to get the current scroll position and the document.documentElement.scrollHeight property to get the total scrollable height of the document, and then calculate the scroll percentage as follows:

This formula calculates the percentage of the total scrollable height that the user has scrolled. The window.innerHeight property is used to get the height of the browser window.

Once the scroll percentage is calculated, it can be used to trigger any desired actions or animations on the webpage.

This formula calculates the percentage of the total scrollable height that the user has scrolled. The window.innerHeight property is used to get the height of the browser window.

Once the scroll percentage is calculated, it can be used to trigger any desired actions or animations on the webpage.

This formula calculates the percentage of the total scrollable height that the user has scrolled. The window.innerHeight property is used to get the height of the browser window.

Once the scroll percentage is calculated, it can be used to trigger any desired actions or animations on the webpage.

This formula calculates the percentage of the total scrollable height that the user has scrolled. The window.innerHeight property is used to get the height of the browser window.

Once the scroll percentage is calculated, it can be used to trigger any desired actions or animations on the webpage.