Hello readers, Today in this blog you’ll learn how to create a Page Scroll Down Indicator Line using HTML CSS & JavaScript. Earlier I have shared many Navigation Menu Bar and some of them are Responsive and some of them are not. But there is no feature of Page Scroll Indicator Line. So now it’s time to create a Page Scroll Indicator Line using JavaScript.
Maybe you saw a top progress bar for showing scroll information on the many websites that indicate the page scroll status. A scroll Indicator is a line that fills up based on how much the user has scrolled up or down the webpage. They are usually placed at the top of the page or on the many you may have seen on the bottom of the Navigation Bar.
Today in this blog, I’ll share with you this program (Page Scroll Down Indicator Line). At first, the indicator line has been hidden. But when we scroll down then the indicator line starts showing. That indicator line starts from the left side of the webpage and the bottom side of the navbar which fills up with blue color.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Page Scroll Down Indicator Line).
Video Tutorial of Page Scroll Down Indicator Line
If you like this program (Page Scroll Down Indicator Line) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects and websites. If you’ve some knowledge of HTML CSS & JavaScript then you can customize this indicator line according to your project requirements.
Page Scroll Down Indicator Line [Source Codes]
To create this program. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Page Scroll Down Indicator</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<nav>
<label>Coding<span>Nepal</span></label>
<div class="scroll-line"></div>
</nav>
<div class="content">
<h2 class="header">
Page Scroll Down Indicator Line
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia autem nemo repellat molestiae et, harum cupiditate provident earum, in inventore quos expedita cumque neque, beatae molestias? Accusamus quis blanditiis explicabo perspiciatis consequuntur molestiae velit nemo? Sunt beatae similique molestiae ratione, amet numquam natus nemo. Non dicta corrupti tempore veritatis, at maxime, fuga dolores provident quae possimus magnam quisquam nesciunt neque. Dolores similique voluptatem voluptates sed, non porro veniam ut nam. Totam iste nulla, optio excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt eos, voluptas id quia animi, officiis ratione impedit neque sit facere eius! Repellat dolorem, odit minus modi ea excepturi optio voluptate illo officia, deleniti eveniet maxime quidem molestias sunt magnam earum veritatis eligendi beatae quae perferendis magni quaerat! Minus laudantium quia, incidunt voluptas quae rerum quidem ipsum in amet earum aut tempore reprehenderit animi sapiente voluptatibus soluta placeat nihil voluptatum impedit veritatis cumque vero. Omnis, magni!
</p>
<h2>
Dashboard Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
About Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Portfolio Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Blog Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Services Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<h2>
Contact Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem minus nesciunt minima praesentium assumenda velit deleniti esse ipsa aut sed numquam ullam placeat tempora fugit, impedit et nihil harum eos ad! Quod accusamus architecto accusantium veniam ratione quasi officia, beatae dignissimos eius illo incidunt molestiae corporis tempore neque dolor molestias quos nesciunt tempora quidem harum sed mollitia commodi explicabo? Cum impedit doloremque odio laboriosam minus optio nostrum voluptates perspiciatis provident, odit quo ullam delectus illo.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident architecto ex, molestias iste minima maxime commodi magnam illo porro, iusto quidem hic beatae atque, nihil quisquam omnis dignissimos optio non fuga quaerat sequi perferendis placeat cum consequuntur? Earum nemo velit, dolores maiores cum deserunt in aut magni asperiores eveniet molestiae est quam harum ad recusandae repellat odit suscipit eligendi aspernatur officiis dolorem soluta? Sapiente repudiandae officia voluptatum ipsum totam inventore, neque soluta eius quia.
</p>
<center>
"You've reached bottom of the page"
</center>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var windowTop = $(window).scrollTop(),
documentHeight = $(document).height(),
windowHeight = $(window).height();
var scroll = (windowTop / (documentHeight - windowHeight))*100;
$('.scroll-line').css("width", (scroll + '%'));
});
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Noto+Sans|Open+Sans:500,700&display=swap');
*{
margin: 0;
padding: 0;
}
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 85px;
background: white;
z-index: 1;
margin-bottom: 20px;
border-bottom: 1px solid silver;
}
nav label{
line-height: 85px;
padding: 0 80px;
font-size: 50px;
color: #0d0d0d;
font-family: 'Montserrat', sans-serif;
}
nav span{
color: #0089f2;
}
.scroll-line{
height: 2px;
background: #0089f2;
margin-bottom: -3px;
width: 0%;
}
.content{
margin-top: 90px;
top: 85px;
padding: 0 80px;
}
.content h2.header{
font-size: 55px;
font-family: 'Open Sans',sans-serif;
}
.content p{
padding: 10px 0;
font-size: 18px;
text-align: justify;
font-family: 'Noto Sans', sans-serif;
}
.content h2{
font-size: 45px;
font-family: 'Open Sans',sans-serif;
}
.content ul{
padding-left: 30px;
}
ul li{
font-size: 20px;
font-family: 'Noto Sans', sans-serif;
}
.content center{
font-size: 25px;
padding: 10px;
color: #1a1a1a;
font-family: 'Open Sans',sans-serif;
}
That’s all, now you’ve successfully created a Page Scroll Down Indicator Line in HTML CSS & JavaScript. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
