This content originally appeared on DEV Community and was authored by TechieBundle
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
This content originally appeared on DEV Community and was authored by TechieBundle
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
TechieBundle | Sciencx (2023-04-23T20:02:47+00:00) Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement. Retrieved from https://www.scien.cx/2023/04/23/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement/
" » Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement." TechieBundle | Sciencx - Sunday April 23, 2023, https://www.scien.cx/2023/04/23/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement/
HARVARDTechieBundle | Sciencx Sunday April 23, 2023 » Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement., viewed ,<https://www.scien.cx/2023/04/23/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement/>
VANCOUVERTechieBundle | Sciencx - » Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/23/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement/
CHICAGO" » Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement." TechieBundle | Sciencx - Accessed . https://www.scien.cx/2023/04/23/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement/
IEEE" » Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement." TechieBundle | Sciencx [Online]. Available: https://www.scien.cx/2023/04/23/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement/. [Accessed: ]
rf:citation » Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement | TechieBundle | Sciencx | https://www.scien.cx/2023/04/23/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.