CSS - Article Progress Bar

Coding Help
1

Hello,

I was on this website and saw this really neat article progress bar:

On the first part of the article:

part one
part one1176Ă—557

On the second part of the article"

part two
part two1642Ă—726

How could I do something like this? Is there a tutorial I can find for this?

2

Think @khalby786 knows…

3

@RiversideRocks I can’t view the images, they seem to be broken…

4

Updated, try now.

6

I actually thought it was a loading bar at first…

7

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
8

Thank you so much, thats really neat!

2 Likes
9

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

  1. get the onscroll function
  2. 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;)
  3. return true?
  4. (NOT OPTIONAL) scroll up and down for years
10

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