Horizontal line at top of webpage …which scrolls

[drone4four]

I previously asked and recieved some terrific help creating the effect of having an off colored line at the top of the webpage frame in your web browser: https://css-tricks.com/forums/topic/opera-com-home-page-single-red-line-effect/

It’s a nice effect. I’ve seen a similar, more useful effect which involves the line (of any color) at the top of the webpage frame (like I have previously) but which increases in length from left to right as the user scroll down the page, typically of a long form article or essay? I raise this question because I am sure there is a proper name for the functionality I’m describing which I would need to use as a keyword to search Google to locate a doc either by Chris Coyier or by someone else like on Stackoverflow.

Please advise.

Thanks for your attention.

[Beverleyh]

“Scroll progress indicator” or “scroll progress bar” would seem like good terms to search on.

Here’s a cool CSS-only demo https://codepen.io/MadeByMike/pen/ZOrEmr

And here’s one I did last year with plain JavaScript http://fofwebdesign.co.uk/template/_testing/scroll-progress.htm

[Shikkediel]

Made me think of the sled with the Xmas story too…

[drone4four]

Hi @Beverleyh: I will play around with the CSS-only demo from the codepen you shared. Your plain JS demo is interesting too. I also noticed your other related blog postings involving the percent sign with the circle around it that changes color. I am not even at a beginner level when it comes to reading JavaScript. If I do jump in and begin playing with it, I’ll be sure to return here to troubleshoot my implementation. Thank you for your help, once again, Beverleyh.

[Beverleyh]

Happy to help @drone4four

Made me think of the sled with the Xmas story too…

Santa’s still lurking online http://fofwebdesign.co.uk/template/_writing/a-mince-pie-too-many/index.htm

I’ve been toying with the idea of doing a revamp that involves CSS animation and changing panel background-color… a verse per panel, with a jingling bell here and a sprouting Xmas tree there http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view.htm. It’s just finding the time to do it that’s the problem :/

[Author]

Posts