Having a reading progress bar is a great way to keep readers on the page because it keeps them from getting bored and lets them know when they are close to finishing it.
Today, I will teach you how to add this feature on your Shopify project’s blog posts without using an app.
1. Open your theme file and under ‘Sections,’ look for the article file, for Dawn the name is ‘main-article’.
1. Now since the position of this element will be ‘fixed,’ and it is not really the most important part of the page, I suggest you place it at the very bottom.
2. Give your main ‘div’ a width of 100% and put it in a fixed position and apply top and left values. Add paddings, colors and other styles that you want to add to make it look something like the sample below.
We will remove the width of the progress bar itself later after the JS code has been added so it doesn’t show in full width when the page loads. We only added this at this point for visual purposes.
1. Declare the necessary variables which are your progress bar (the bar itself, not its parent <div>) and the main container of your article page.
2. Write your very short function. I have explained everything in the comments in the code below. It is basically just 2 lines of code.
3. Add your scroll event listener.
4. Don’t forget to remove the 100% width of the progress bar from your CSS so it doesn’t load in full width.
