Hello,
I was on this website and saw this really neat article progress bar:
On the first part of the article:
On the second part of the article"
How could I do something like this? Is there a tutorial I can find for this?
Updated, try now.
I actually thought it was a loading bar at first…
Hi @RiversideRocks,
It’s actually called a scroll indicator! It’s a really cool stuff mostly used by blogs to indicate how much you have scrolled, or rather, how much of the page is left.
There’s actually a W3Schools article for that!
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
You should be able to tweak the CSS to adjust the width of the bar and the color.
Hope this helps!
4 Likes
Thank you so much, thats really neat!
2 Likes
Article progress bars should be as easy as cake with js.
Um, if your feeling like another way to do this a pretty complex example here are some 123 steps that were totally “generated” by me
- get the onscroll function
- while still in the function just check how much they scrolled and apply the vh value (for example if you wanted a full background do width:100%; and height:100vh;)
- return true?
- (NOT OPTIONAL) scroll up and down for years
I would not do that, because scroll indicators actually indicate how much of the page you have scrolled. It’s best to use view port properties. (When you load a page, it’s not always necessary that you will be at the top of the page. Therefore, using the scroll function could break the scroll indicator)
1 Like