Hello guys in this tutorial we will create scroll indicator line using HTML CSS & JavaScript.
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scroll Indicator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="scroll-indicator"></div>
<script type="text/javascript">
const indicator = document.querySelector("#scroll-indicator");
const MaxHeight = document.body.scrollHeight - window.innerHeight;
window.addEventListener("scroll", ()=> {
const per = (window.scrollY / MaxHeight) * 100;
indicator.style.width = `${per}%`;
})
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
background: #f1f2f3;
height: 600vh;
}
#scroll-indicator {
position: fixed;
top: 0;
height: 5px;
background: #4b00ff;
width: 0;
}