In this guide, we will explore process of using HTML, CSS, and JavaScript to design a circular scroll progress indicator. This type of indicator displays percentage of a webpage that has been scrolled. Specifically, we will create a circular indicator and position it in bottom right corner of webpage. The indicator's fill level will correspond to amount of page that has been scrolled.
HTML
<!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
*{
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
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;
The code snippet is a JavaScript function that updates a circular scroll progress indicator on a webpage as user scrolls. The function is executed when page loads and every time user scrolls page. Here are step-by-step explanations of code:
- •The let scrollPercentage = () => {...} statement defines a function named scrollPercentage. This function takes no parameters and uses arrow function syntax.
- •The first line of function gets a reference to HTML element with id of progress and assigns it to scrollProgress variable. This element will serve as background of circular progress indicator.
- •The second line gets a reference to the HTML element with id of progress-value and assigns it to progressValue variable. This element will display current percentage value of progress indicator.
- •The third line gets current vertical position of page using document.documentElement.scrollTop property and assigns it to pos variable.
- •The fourth line calculates maximum vertical height that can be scrolled using document.documentElement.scrollHeight and document.documentElement.clientHeight properties. The result is stored in calcHeight variable.
- •The fifth line calculates current scroll value as a percentage of maximum scroll height. This value is rounded to nearest integer using Math.round method and assigned to scrollValue variable.
- •The sixth line sets the background of scrollProgress element using a conic gradient. The first color #008fff is used for portion of indicator that represents scrolled area, while second color #c0c0ff is used for remaining area. The scrollValue variable is used to specify angle of gradient.
- •The seventh line sets text content of progressValue element to current scrollValue followed by a percent sign.
- •The window.onscroll = scrollPercentage; statement assigns scrollPercentage function to onscroll event of window object. This means that function will be called every time user scrolls page.
- •The window.onload = scrollPercentage; statement assigns scrollPercentage function to onload event of window object. This means that function will be called when page finishes loading.
Comments
Post a Comment
Hello,
Thank you for taking the time to leave a comment! Your feedback is important to us and we appreciate any suggestions or thoughts you may have. We strive to create the best possible experience for our users and your comments will help us achieve that goal.
If you have any questions or concerns, please don't hesitate to reach out to us. We're here to help and are always happy to hear from our users.
Thank you again for your comment and have a great day!
Best regards,
NewWebSofts