In today’s tutorial, we will learn how to create a circular scroll progress indicator. A Scroll indicator denotes the percentage of a webpage that has been scrolled. It can be done using various ways. I have previously created a tutorial on how to create a scroll indicator bar. You can check it out here.
For this tutorial, we create a circular scroll indicator that we will place in the bottom right corner of the webpage. The fill in indicator will correspond to the amount of page scrolled. Let us start with the tutorial.
Video Tutorial:
If you would like you can check out the preview video and tutorial video that I have posted on my youtube channel here:
Project Folder Structure:
Let’s check out the project folder structure. We have a project folder called Scroll Percentage. Inside this folder, we have three files. The first is – index.html. The second is the stylesheet – style.css and the Third is the script script.js.
HTML:
Coming to the HTML section, copy the code below and paste it into your HTML section.
The HTML section consists of some demo text. Next, we have a div with id progress. Within this div, there is a span element with id progress-value.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll Percentage</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="progress">
<span id="progress-value"></span>
</div>
<h1>SCROLL PERCENTAGE</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam natus ex, molestias quis, aut veritatis similique exercitationem iure magni nobis iusto quaerat explicabo dolores et. Optio quis eum itaque deserunt, sapiente quasi asperiores, voluptatum doloribus aspernatur iusto vero velit tempora animi, labore hic corporis unde voluptates architecto odit ipsum neque laborum eius ea. Vitae error voluptatum tempore assumenda dolorum. Odit deserunt nihil saepe, ullam fuga minima eum, recusandae soluta atque autem porro expedita cum ipsum quasi sit quae dolorum reiciendis ducimus quia odio blanditiis provident dignissimos! Quas facilis dolorum assumenda voluptates dolores, cum tempora voluptatum non ducimus. Animi optio corrupti ipsam, corporis similique nostrum ea dolores aut perferendis minus rerum neque at sit veritatis eos cumque voluptas, velit dignissimos nam fugit. Possimus vel eius expedita a animi tempore pariatur molestiae quod accusantium totam doloremque repellendus incidunt dolorum reiciendis assumenda, in quaerat nisi corrupti culpa voluptas obcaecati, cupiditate itaque minima aspernatur! Sit, blanditiis quae, recusandae rerum quod soluta qui eaque sed, harum labore id tempore accusantium hic provident nisi libero odit ea distinctio aspernatur corrupti et sint odio. Ipsam suscipit nobis animi iure est minima assumenda inventore asperiores maiores iusto. Quibusdam eveniet enim dolore tenetur suscipit fuga, quod eum pariatur magni?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima repellendus quas perferendis non corporis, quam saepe est suscipit tenetur sed placeat id qui enim ullam at, eius perspiciatis quisquam. Quisquam maiores ullam fuga libero esse ad alias dignissimos natus eum inventore adipisci nesciunt vero harum nihil, voluptatum magnam possimus voluptates dicta itaque, sequi accusantium, voluptatibus minima sit necessitatibus. Perspiciatis nam autem consectetur neque natus exercitationem expedita? Aut quaerat a quos, rem in consectetur modi pariatur, harum qui temporibus repellendus totam commodi enim mollitia! Magnam fugit eaque ex, vel pariatur soluta delectus? Eaque quisquam iusto inventore natus optio, asperiores voluptas consequuntur nostrum nesciunt quidem velit earum. Dolor, ratione eveniet optio quam, ipsum reiciendis eum delectus quasi omnis excepturi non unde quisquam soluta maiores et? Provident excepturi voluptatum quidem sunt et perspiciatis. Qui, error? Temporibus quae laudantium possimus minima id consequuntur iusto quo ea, nisi doloribus dignissimos hic voluptatibus, illum magni! Vero quia necessitatibus cupiditate vitae voluptatem minima fugiat, quas non atque porro. Tenetur, esse illo iure rem vel eum hic aliquam non explicabo officiis atque magni velit beatae expedita perspiciatis repellat.</p>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we code the CSS section. Copy the code provided below and paste it into your stylesheet.
We apply some basic styles to the demo text. In the next step, we set the height and width of the progress div. We make it circular by adding a border radius of 50%. Also, we position it at a fixed place that is 25px from the bottom and 25px from the right. To make it stand out from the rest of the page we add some box shadow to it. Lastly, we centre the span element inside the progress by using the grid layout.
We set the display of progress-value to block. The progress-value span should be smaller than the progress div. Hence, we subtract 20px from the progress div.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}
h1{
color: #008fff;
font-size: 15vmin;
text-align: center;
padding: 30px 0;
}
p{
font-size: 3vmin;
line-height: 2em;
letter-spacing: 0.05em;
text-align: justify;
margin: 50px 0;
padding: 0 30px;
}
#progress{
height: 100px;
width: 100px;
border-radius: 50%;
position: fixed;
bottom: 25px;
right: 25px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
display: grid;
place-items: center;
}
#progress-value{
display: block;
height: calc(100% - 20px);
width: calc(100% - 20px);
background-color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 600;
font-size: 20px;
}
Javascript:
We add an on scroll event to the document window. When the document is scroll the scrollPercentage() is triggered.
We get the progress and progress-value element and assign them to variables. Further, we assign the scroll position from the top of the document to the pos variable. Now using the pos value we calculate the scroll value in terms of percentage.
We display its value inside the progress value. Also, we use this same value to fill the conic gradient. This way when you scroll it looks like the circular progress bar is getting filled. Your circular scroll progress indicator is now ready.
let scrollPercentage = () => {
let scrollProgress = document.getElementById("progress");
let progressValue = document.getElementById("progress-value");
let pos = document.documentElement.scrollTop;
let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrollValue = Math.round( pos * 100 / calcHeight);
scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`;
progressValue.textContent = `${scrollValue}%`;
}
window.onscroll = scrollPercentage;
window.onload = scrollPercentage;
Â
You can download the source code by click on the download button below. In case you have any queries or suggestions, do comment on them below.
Good Design
Brother is code ko mai apni wordpress website me kaise enter karu, can you plz explain.i am giving you my website name in below. Plz reply..Thanks
Work fine
Very nice Your code and your hard work ..Thannnnnnnnkkkkkkkkkuuuuuuuuu………