Learn how to build a stylish circular scroll progress bar using HTML, CSS, and JavaScript. Improve your website’s UX with a dynamic scroll indicator that enhances user engagement.
Introduction
Hi everyone have a nice day. I hope you are doing well. We are continuing our coding journey. Today, we will build another interesting project, which is a circular scroll progress bar using HTML, CSS and JAVASCRIPT. This type of scroll It’s going up user experience by showing, how much of the page is remaining to read that is making navigation smoother and more interactive. At the end of this article ,you will see live how this circular scroll progress bar works by clicking the button that says “view demo”, and you can also download all the code and resources from the button that says “download resources”.
By the end of this guide, you’ll have a fully working circular scroll indicator that you can customize and use on your website. Let’s get started!
What is a Circular Scroll Progress Bar?
A circular scroll progress bar is a visual indicator that shows how much of a webpage you’ve scrolled through. As you scroll down the page, the circle fills up, that is showing how much of the page you have remaining. It’s a great way to make your website more interactive and user-friendly.
Why Use a Circular Scroll Indicator?
A circular scroll indicator makes your website look modern and keeps users engaged. It gives a quick visual cue of how much content is left, making it easier for visitors to navigate longer pages without feeling lost.
✅Key Benefits of a Circular Scroll Indicator
- Improves up User Experience: Helps visitors to see how much of the page they have scrolled and how much is remaining.
- Enhances Navigation: Makes it easier to track progress, especially on long pages.
- Adds Visual Appeal: Gives your website a modern, interactive touch.
- Encourages Engagement: Users are more likely to keep scrolling when they see their progress.
HTML Structure for the Scroll Bar
Now let’s start by creating the HTML structure for the progress bar. It’s a simple design that creates the basis for customization and adding functionality later.
Here you will copy the complete HTML code, and then I will explain how it works below.
<!DOCTYPE html>
<html>
<head>
<title>Codeweave24 - Circular Scroll Bar</title>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="scroll-circular">
<div id="circle-bg">
<i class="fas fa-arrow-up"></i> <!-- Font Awesome Up Arrow -->
</div>
</div>
<h1>Circular Scroll Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script src="script.js"></script>
</body>
</html>
👉Explanation
Let’s break down the HTML structure for this project. This code creates the foundation for our circular scroll progress bar:
✔️Basic HTML Setup:
The <!DOCTYPE html> declares the document type, while the <html>, <head>, and <body> tags structure the web page. The <title> sets the page title, which appears on the browser tab.
✔️Font Awesome for Icons:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
- This line includes Font Awesome, allowing us to use the arrow icon inside the scroll circle.
✔️Scroll Progress Circle:
<div id="scroll-circular">
<div id="circle-bg">
<i class="fas fa-arrow-up"></i>
</div>
</div>
- This section creates the circular progress indicator with an up-arrow icon inside. As you scroll, this circle will visually represent your progress.
✔️Content for Scrolling:
The <h1> and <p> tags represent the page content. This content creates enough scrolling space, making the progress bar functional.
✔️Linking CSS and JavaScript:
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
- These lines link the external CSS for styling and the JavaScript for functionality.
This simple structure gives life to the circular scroll progress bar. Next, we’ll style it with CSS and add functionality with JavaScript. Let’s keep going.
Styling the Scroll Bar with CSS
Now, let’s move on to styling the scroll bar with CSS. This step will shape the circular design, set its size, color, and position, making it look clean and visually appealing.
Here, you’ll find the complete CSS code, followed by a breakdown of how each part works.
:root {
--theme: #4166fa;
--bgtheme: #ffffff;
--colortheme: black;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: var(--bgtheme);
color: var(--colortheme);
padding-bottom: 20px;
}
#scroll-circular {
width: 50px;
height: 50px;
border-radius: 50%;
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(var(--theme) 0%, rgba(0,0,0,0.1) 100%);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
opacity: 0.9;
transition: opacity 0.2s ease;
}
#scroll-circular:hover {
opacity: 1;
}
#circle-bg {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bgtheme);
display: flex;
align-items: center;
justify-content: center;
color: var(--theme); /* Font Awesome icon color */
font-size: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
opacity: 1;
transition: opacity 0.3s ease;
}
p {
padding-top: 20px;
text-align: justify;
margin: 5px;
font-size: 16px;
line-height: 25px;
}
h1 {
margin: 40px;
text-align: center;
color: rgb(50, 50, 238);
margin-bottom: 0px;
}
p::selection {
background: var(--theme);
color: white;
}
👉Explanation
Now Let’s break down the CSS styling for this project. This code defines the appearance of our circular scroll progress bar and ensures it works smoothly across the website.
✔️Root Variables:
:root {
--theme: #4166fa;
--bgtheme: #ffffff;
--colortheme: black;
}
- These are custom CSS variables for easier theme management.
--themedefines the primary color of the scroll bar.--bgthemesets the background color.--colorthemecontrols the default text color.
✔️Body Styling:
body {
font-family: Arial, Helvetica, sans-serif;
background: var(--bgtheme);
color: var(--colortheme);
padding-bottom: 20px;
}
- Sets the page font to a clean, modern style.
- Applies the background and text color using the root variables.
- Adds padding at the bottom to avoid content sticking to the edge.
✔️Circular Scroll Bar:
#scroll-circular {
width: 50px;
height: 50px;
border-radius: 50%;
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(var(--theme) 0%, rgba(0,0,0,0.1) 100%);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
opacity: 0.9;
transition: opacity 0.2s ease;
}
- Creates a circular progress bar with a 50px width and height.
conic-gradientgenerates the dynamic progress color.- Fixed position keeps it visible at the bottom right while scrolling.
- Box shadow gives it a slight floating effect.
- Opacity transition makes it smoother when hovered.
✔️Inner Circle Background:
#circle-bg {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bgtheme);
display: flex;
align-items: center;
justify-content: center;
color: var(--theme);
font-size: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
opacity: 1;
transition: opacity 0.3s ease;
}
- This is the inner white circle inside the progress bar.
- Contains the up arrow icon for scrolling.
- Adjusted size (44px) ensures it fits perfectly within the progress circle.
- Transitions make it fade in and out smoothly.
✔️Text and Headings:
p {
padding-top: 20px;
text-align: justify;
margin: 5px;
font-size: 16px;
line-height: 25px;
}
h1 {
margin: 40px;
text-align: center;
color: rgb(50, 50, 238);
margin-bottom: 0px;
}
- Paragraphs get a clean, readable format with proper line height.
- The h1 heading is centered and styled in blue for emphasis.
Adding Scroll Animation with JavaScript
Now, let’s dive into the JavaScript part. This code adds functionality to the circular scroll progress bar, making it update as you scroll through the page.
Here you will copy the complete JavaScript code, and then I will explain how it works below.
function $(query) {
return document.querySelector(query);
}
function getSource(n) {
return `conic-gradient(var(--theme) ${n}%, rgba(0,0,0,0.1) ${n}%)`;
}
window.onscroll = () => {
const scroll = Math.round(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100);
$("#scroll-circular").style.background = getSource(scroll);
};
// Scroll to top on click
$("#scroll-circular").addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
👉Explanation
Now Let’s take a look at the JavaScript that makes this project work. It handles the progress tracking and ensures the scroll bar updates in real-time as you move down the page.
✔️Query Selector Function:
function $(query) {
return document.querySelector(query);
}
- This function simplifies the process of selecting HTML elements.
- For example,
$("#scroll-circular")works the same asdocument.querySelector("#scroll-circular"). - It makes the code cleaner and easier to read.
✔️Background Gradient Function:
function getSource(n) {
return `conic-gradient(var(--theme) ${n}%, rgba(0,0,0,0.1) ${n}%)`;
}
- This function generates a circular progress effect using a conic gradient.
nrepresents the scroll percentage.var(--theme)applies the primary theme color, and the rest of the circle is light gray (rgba(0,0,0,0.1)).
For example, if n = 50, the background becomes a half-filled circle.
✔️Scroll Event to Update Progress:
window.onscroll = () => {
const scroll = Math.round(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100);
$("#scroll-circular").style.background = getSource(scroll);
};
- How it works: Every time you scroll, this code calculates how much of the page you’ve scrolled.
- Formula breakdown:
window.scrollY: Distance scrolled from the top.document.documentElement.scrollHeight: Total height of the page.window.innerHeight: Height of the visible window.
- It calculates the scroll percentage and updates the background with the gradient using the
getSource()function.
Example: If you scroll halfway down the page, it sets the progress to 50%.
✔️Smooth Scroll to Top:
$("#scroll-circular").addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
When the user clicks the circular progress bar, this code smoothly scrolls the page back to the top.behavior: 'smooth' ensures a clean, animated scroll instead of jumping instantly.
In summary, the JavaScript code powers the circular scroll progress bar by tracking how far you’ve scrolled and updating the progress in real-time using a conic gradient. It also adds functionality to scroll back to the top when the progress bar is clicked, enhancing both user experience and website navigation.
Final output
Conclusion
In conclusion, we have built a simple and powerful scroll progress bar that enhances the user experience of the website. By Combining with HTML, CSS, and JavaScript, this scroll bar indicates how far the user has scrolled on the page, This not only improves the visual appeal of your site, but also encourages users to continue exploring by providing real-time progress. And with the added functionality of being able to go back to the top with a click, you have authirty that adds both functionality and style. Now, you are all set to integrate this into your website and customize it to fit your design.
Here you can see how the project works by clicking the View Demo button. You can also download all the project resources by clicking the Download Resources button. Enjoy and happy coding—keep learning!
2 comments
[…] to Create an Animated Clock with HTML,… Secure Password Generator using HTML, CSS and JavaScript. Circular Scroll Progress Bar Using HTML, CSS &… Stylish Accordion with HTML, CSS and JavaScript iPhone Calculator-Style with HTML, CSS & […]
[…] to Create an Animated Clock with HTML,… Secure Password Generator using HTML, CSS and JavaScript. Circular Scroll Progress Bar Using HTML, CSS &… Stylish Accordion with HTML, CSS and JavaScript iPhone Calculator-Style with HTML, CSS & […]