Scroll page progress bars are a useful feature to help users track their progress as they scroll through long pages. By adding an interactive scroll page progress bar to your website or application, you can enhance user engagement and improve the overall user experience.
In this article, we will explore how to create a custom scroll page progress bar using CSS. We will discuss the basic HTML structure required for the progress bar, and then dive into the CSS code that will bring it to life. We will also cover some best practices and tips for designing an effective scroll page progress bar that fits seamlessly with your website or application.
Step 1: Add HTML Markup
The first step is to add HTML markup for your interactive scroll page progress bar. Here's an example:
<!-- tb is acronym for TechieBundle -->
<div class="tb-container-bar">
<div class="tb-progress-bar"></div>
</div>
<div class="tb-wrapper">
<header>
<div class="tb-container">
<a href="https://techiebundle.com">
<img src="//techiebundle.com/wp-content/uploads/2022/12/techiebundle-white-1-1.png" alt="Web Development Agency | TechieBundle" height="60" target="_blank">
</a>
<div class="nav navigation-wrapper">
<ul class="nav-list">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Portfolio</li>
<li class="nav-link">Blog</li>
<li class="nav-link">Contact</li>
</ul>
</div>
</div>
</header>
<div class="tb-container tb-margin-top">
<h1>Scroll Page Progress Bar with CSS (Scroll Down)</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo commodi nesciunt maiores saepe? Repellat at quia dignissimos nobis, vitae cumque delectus dolorem totam cum. Voluptas quos delectus fuga dicta accusamus.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex earum doloribus quasi atque? Voluptatem rem maiores, reiciendis doloremque fuga earum quia, quis laboriosam minima natus, in sunt debitis repellat consequuntur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ipsa sed tempora in aperiam autem quidem rem alias ratione! Rem debitis reiciendis aliquid mollitia deleniti. Hic reprehenderit aliquid nisi officiis!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, dolor repellat! Iure ratione perspiciatis officia illo provident dignissimos earum sunt, natus adipisci dolorum saepe corrupti rerum aliquam ex vel. Voluptas!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem aut ipsa, optio voluptatem doloremque in labore facere, dignissimos, laudantium voluptas rem molestiae iure hic alias sunt. Sequi rem error corrupti!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.</p>
<br>
</div>
<br>
<br>
</div>
<footer>
<div class="copyright">
© 2023 <a href="https://techiebundle.com" target="_blank">TechieBundle</a>. </div>
</footer>
Step 2: Add CSS Styles
Next, you'll need to add CSS styles to create the appearance of your interactive scroll page progress bar.
@import url("https://fonts.googleapis.com/css?family=Asap|Playfair+Display+SC:900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;500;600;700;900&display=swap");
html,
body {
position: relative;
height: auto;
background: #fcfcfc;
line-height: 180%;
font-family: "Nunito", sans serif;
}
p {
color: #474747;
font-size: 14px;
}
h1{
text-align:center;
}
.tb-margin-top {
padding-top: 8em;
}
.tb-wrapper {
position: relative;
overflow: hidden;
z-index: 3;
}
.tb-container {
max-width: 920px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.tb-container > a > img {
border-radius: 50%;
}
header > div {
display: flex;
justify-content: space-between;
align-items: center;
height: 90px;
}
header {
position: fixed;
top: 0;
width: 100%;
background: #fcfcfc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.tb-container-bar:before {
position: fixed;
content: "";
display: block;
z-index: 2;
border-left: 100vw solid white;
border-right: 100vw solid white;
border-bottom: calc(100vh - 92px) solid white;
bottom: 0;
}
.tb-progress-bar {
position: absolute;
top: 92px;
width: 100%;
height: 100%;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e0/Black_right_angled_triangle_2.png);
background-repeat: no-repeat;
background-attachment: scroll, fixed;
background-size: 100% calc(100% - (100vh - 91px));
z-index: 1;
}
footer {
position: absolute;
height: auto;
width: 100%;
background-color: #fcfcfc;
text-align: center;
line-height: 90px;
z-index: 2;
letter-spacing: 4px;
bottom: -120px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer > .copywrite {
letter-spacing: 1px;
}
.navigation-wrapper > ul {
display: flex;
align-items: center;
justify-content: center;
gap: 2em;
}
.navigation-wrapper > ul > li {
color: #474747;
font-size: 1.25em;
list-style: none;
cursor: pointer;
position: relative;
font-weight: 500;
}
.navigation-wrapper > ul > li:hover::before {
content: "";
position: absolute;
bottom: 0;
height: 0;
width: 0;
z-index: 1;
border-bottom: 2px solid #474747;
animation: border-move 0.5s linear;
animation-fill-mode: forwards;
}
@keyframes border-move {
100% {
width: 100%;
}
}
You're welcome! I'm glad to have been of help. If you have any further questions or need additional assistance, don't hesitate to ask or also go through this link for live demo:
Engage Your Users: How to Create an Eye-catching Scroll Page Progress Bar with CSS
Top comments (4)
Very Helpful.
Thanks for your valuable comment
Never really understood the point of these - how is this information useful to the user? I can actually see it resulting the user not bothering to read your content because they think it is too long - not really a good thing for the site.
I also fail to see how it would increase engagement (could even reduce it - see above), or how it is 'interactive' (it isn't)?
Thanks for your comments. We will focus on it.