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; }