How to Create a Scroll Progress Indicator for your blogger and WordPress Website

scroll indicator examples horizontal scroll indicator scroll indicator html scroll indicator codepen scroll indicator javascript vertical scroll indicator animated progress bar on scroll scrollbar in html div
image credit:- Uxdesign



How to create a scroll progress indicator for your blogger and WordPress website so whenever you are on a post on a blog or website and when you scroll down we can see this progress indicator over and when we reach the end of the post we can see that the progress indicator has a width of 100%and when we scroll up it moves back to 0% so this is what we are going to design, so let's get started, opened a blank project, invs code so let's go ahead and create a new file and we'll name it index dot HTML and let's create another file called style dot CSS and one more file for the JavaScript alright let's start with the HTML and we'll create some basic HTML file boilerplate code and we will link our CSS file and we just need one division in our HTM Land we'll call it to scroll progress indicator or right now let's open this with our browser now let's go to our style dot CSS and let's style this progress bar.


So we'll target the division called scroll progress indicator and first of all we'll just give some random width over so we'll just give 50% width and a height of 4 pixels and a background color of  so we can see the progress indicator right let's also give it's position so we'll set the position to fixed so that it will always stay on the top and then we will set the top to zero and the left to zero and we'll also give it a z-index so that it'll be aboveevery other element so we'll set this z-index to around 500 now let's also give it a box shadow so we will type 0 -1 pixels 8 pixels 2 pixels and for the color rule set RGB a with two 5500 and 0.6 and that's it with the styling now we need to set the width of our scroll progress indicator based on the scroll value of our post so for that let's go to our blog or website so we'll do that using JavaScript but  let's go to one of this postsover and let's right click over and click on inspect so let it just make this a little bigger and we can see this is the post title and if you take a look at the outer element we have a division and then we have another division called post content so let's check what is post content so we'll scroll down and when we hover or the post content division we can see that it is the division that contains the whole post so we have to target this division over called post content and if you go up we can see that it is inside this class called blog with that in mindlet's go ahead and start with ourJavaScript to make things a little easier for us we'll just go ahead and view page source and we'll copy everything from and we'll paste it in our HTML and now if you take a look at the project we can see the exact same post over so now it will be easier for us to test the scroll progress indicator so let's go to our HTML and let's add the script and our division so just go over and search for body and in the body we will just add our division scroll progress indicator and we'll also link our CSS all right so now you can see the progress indicator now we need to know two things from this page to make this work so let just open the console and let me show you what are the values we need so first of all we need the value of these croll so we type window dot scroll why we can see the value is three now if we scroll down a little and now if we check the value of window scroll Y we can see that the value has increased so this is basically the value of how much we havescrolled from the top so if you are allthe way at the top then the value of window dot scroll Y will be zero now thenext thing we need to have is the height of our post so for that we can type document dot query selector and we know that it is inside the blog Division andit is called post content and then if you type dotclient height we can see the height ofour post content so these are the two things we need when we start working with our JavaScript so let's open ourJavaScript but first of all let's say the width of our scroll indicate throwto 0 now we need to reference two thingsover the first one is the scrollprogress indicator so the app Const scroll progress indicator equals document dot query selector and will tab scroll progress indicator over nowthe next thing we need is post content so we'll type Const post content and for that we'll type document dot query selector and we'll type blog space post content all right now weneed to add an event listener to our window object so we'll type window dotadd event listener and we'll add the scroll event and we create an arrow function over now let's create avariable called scroll amount and we'll set it to window dot scroll Y now let'screate another variable called post height and we'll set it to post content dot client height and then we need to calculate the width of our progress indicator so we'll create one more variable called progress and we set it equal to scroll Mount / post content times 100 so this will give us the width value now let'scheck whether we are getting the correct values so we'll type console dot log progress and we'll just display the progress value over so let's open our console and let's scroll down and we don't have the correct value so let's check our code and you have to type post height and not post content so this changes to post height all right so now let's scroll down and we can see thevalue of progress over and when we each the end of our post content division we can see that the value is hundred now right now it is getting the value of 100 when we reach the end of the post content now we want to reach the value of 100 when we are some around and the next thing we need to fix is that when we go past 100 weneed the value to stay 100 and not gobeyond 100 so those are the two thingswe need to fix right now so first of all you have to change the post height soright now the post height is post content dot client height now we need to remove the height of this window from the client height because right now the height is being calculated along with this window height over so for that we will just stop post content dotclient height minus window dot innerheight and for the scroll amount we willuse a function in JavaScript called minso we'll type math dot min and we'll adda parenthesis over and for the second argument we will type 100 so nowthe progress will be the minimum value among this calculation and 100 so now our progress value will not go beyond 1so let's open the console and let's scroll down and we can see when we reachthe end of the post we have the value of 100 and when we scroll down again thevalue still stays 100 and when we scrollup we can see that the value reduces tozero we reach the value of 100 just aswe touch the end of the post content solet's increase the height of the post content so that will reach hundred whenwe are around so we'll go toour JavaScript and we will add a valueof 120 all right now when we read around we have the value of 100 right nowthe last thing we need to do is set thewidth of our scroll progress indicator so let's remove the console. log from and we will type scroll progress indicator dot style dot width and we'll set it equal to progress and we'll concatenate the % over so we can see the scroll progress indicator and when we reach over we have the width of 100% and when we reach the top we have the width of 0 right so our progress indicator is working all right now...


 Let's copy this to our blogger website so I am in the dashboard ofmy blogger website so let's go to the theme and then click on edit HTML or a firstof all we need to add a division with the class of scroll progress indicator so let's add it right after the body tagbegins so we will type division andwe'll give it a class of scroll progress indicator right now let's copy theJavaScript and we'll search for the endof the body tag and we'll paste our coderight and lastly let's also copy the CSS and let's paste it w all our Styles a replaced so we'll add it right right now let's click on save theme now let's click on view blog and let's  open a post and we can see when we scroll down we have the indicator andwhen we reach the end of the post it hasa width of 100% we'll open another post so we can see that it works for all theposts all right so that's basically itfor this video if you have any doubts you can ask in the comments below and click on the like button if you enjoyed this to this Post to get the latest Notification updates Subscribe to this website thanks a lot!!!



 <!DOCTYPE html>  
 <html lang="en">  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Scroll Progress Indicator</title>  
   <link rel="stylesheet" href="style.css" />  
   <div class="scroll-progress-indicator"></div>  
   <div class="Blog">  
    <div class="post-content">  
      Just copy and paste the code from main.js and style.css to your  
      Blogger website and make minor tweaks if you need to.  
   <script src="main.js"></script>  

CSS Code:-

 .scroll-progress-indicator {  
  width: 0;  
  height: 4px;  
  background: #f31414;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 500;  
  box-shadow: 0 -1px 8px 2px rgba(255, 0, 0, 0.6);  
JavaScript Code:-

 const scrollProgressIndicator = document.querySelector(  
 const postContent = document.querySelector(".Blog .post-content");  
 window.addEventListener("scroll", () => {  
  let scrollAmount = window.scrollY;  
  let postHeight = postContent.clientHeight - window.innerHeight + 120;  
  let progress = Math.min((scrollAmount / postHeight) * 100, 100); = progress + "%";  



Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

buttons=(Accept !) days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !