Scroll Page Progress Bar: Intro
A scroll page progress bar is a useful user interface element that provides a visual representation of how far a user has scrolled on a web page. It helps to enhance the user experience and makes it easier for the user to navigate through the content of the page. With the power of CSS, it is possible to create a customized and dynamic scroll page progress bar that adds to the overall aesthetics of the website. In this article, we will explore different techniques and strategies for designing a stylish and interactive scroll page progress bar using CSS.
We will cover the basic HTML structure, the CSS properties required to create the progress bar, and advanced features like animations and customization options. By the end of this article, you will have the skills to create a unique and functional scroll page progress bar that will take your website’s user experience to the next level.
Author
- TechieBundle
- April 23, 2023
Live Demo
Code
You can check the code used in the demo below which you can also use in your projects.
HTML
The first step is to create the HTML structure that will contain the scroll page progress bar. You can add a div element with a class name like “tb-progress-bar” that will be styled using CSS. Here’s an example code snippet:
<!-- 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>
CSS
Next, you’ll need to add CSS properties to style the scroll page progress bar. The key properties you’ll need to add are:
@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%;
}
}
Technologies Used
- HTML / CSS
About the code
Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari
Responsive:- No
Dependencies: – N/A
Conclusion
A scroll page progress bar is a small but effective way to enhance the user experience of your website. With CSS, you can create a customized and dynamic progress bar that complements your website’s design and helps users navigate through your content more easily. Remember to experiment with different CSS properties and features to create a unique and engaging scroll page progress bar.
Also Check : Creating a Stylish File Upload Button with CSS and Image Preview Feature
