DEV Community

Cover image for Create a Reading Scroll Progress Bar for Your Blog in JavaScript and CSS

Create a Reading Scroll Progress Bar for Your Blog in JavaScript and CSS

Gabe Romualdo on February 05, 2020

I just recently added a fun little feature on my website: a progress bar when reading blog posts. The bar would show how far users have progressed ...
Collapse
 
waylonwalker profile image
Waylon Walker

Very nice... I want to say,

"doesnt the web already come with a progress bar on the side?"

but this looks so good. I would go for it!

Collapse
 
tayyebi profile image
Tayyebi

Dear Waylon, in some cases, when there is a serial of content, or a lazy loading concept for posts is implemented, the scroll bar will not be feasible (because of later appended content). We solved this issue for video content so far with timeline, and it's nice to have it for text content. Anyway I'm totally agree with you that if there is a single "post" in a "page", it's not a good idea to have a horizontal progress bar.

Hey Fred. That was cool man! Bravo. A minimal code that works. Well done.

Collapse
 
gaberomualdo profile image
Gabe Romualdo • Edited

Thanks, I really appreciate that!

— Gabriel

Collapse
 
gaberomualdo profile image
Gabe Romualdo • Edited

Thank you! I personally would only use this for articles or longer pages on a site, just to give users a clearer reminder of how long the page is and how far they've read. Thanks again!

— Gabriel

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

Nicely done! It even works in Edge.

That said, I'm not a big fan of BEM. This looks awful to me:

progress-bar-container__progress

Side note: I once tried adding a reading progress bar to my blog and found it pretty distracting. There's a good discussion about it over on the UX Stack Exchange.

Collapse
 
whatthehanan profile image
Hanan Hamza

I personally prefer BEM with scss.

Collapse
 
djpandab profile image
Stephen Smith

Good job. I like this!

Collapse
 
gaberomualdo profile image
Gabe Romualdo • Edited

Thanks!

— Gabriel

Collapse
 
kumareth profile image
Kumar Abhirup

Hey hi! Ur write-up is awesome! I am Kumar Abhirup, teenager JavaScript developer. Check out my profile we have a lot in common ⚡😄

Collapse
 
joseluisrnp profile image
José Luis Recio

Cool and simple progress bar!

Collapse
 
gaberomualdo profile image
Gabe Romualdo • Edited

Thank you!

— Gabriel

Collapse
 
yashwanth2804 profile image
kambala yashwanth

Better If we got this implemented in dev.to site articles too.