How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

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.

Creating custom CSS shapes and icons

Creating Custom CSS Shapes and Icons Custom CSS shapes and icons refer to unique visual elements that are created using Cascading Style Sheets (CSS) rather than using traditional image formats such as JPEG, PNG, or SVG. By using CSS, developers can create custom shapes and icons that can be easily scaled, manipulated, and styled without having to rely on external image files. Back to TOC Table of Contents Introduction Creating Shapes with CSS Creating Icons with CSS Demo • Introduction In this article, we will learn how to create custom shapes and icons using CSS. We will explore different techniques and examples to help you understand how CSS can be used to create unique visual elements for your website. • Creating Shapes with CSS Creating custom shapes with CSS can be done using a variety of techniques such as using borders, gradients, and pseudo-...

CSS Commando

Search This Blog

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

Labels

Comments

Post a Comment

Popular posts from this blog

Everything You Need to Know About CSS Grid

Creating custom CSS shapes and icons

Find Your Location using HTML, CSS & JavaScript