Scrolling Progress: Indicate the Scroll Progress of Content

The Scrolling Progress plugin indicates scroll progress of a content section, as you would expect from the name.

The plugin is designed using a two-part structure with a content area and progress bars. The animation changes based on your progression through a webpage.

It works because each section of the content has a unique identifier, which helps calculate the percentage. Each bar then has a link to smooth scroll to that section.

Progress bars are set with a fixed positioned as you scroll down the page. The progress bars in this plugin have a background color and a span element with its width animated to simulate the progress bar.

There are not a lot of preset options here, but you can alter the CSS as you see fit.

There’s a bit of code to process when using this plugin but once you get it installed, the result is quite nifty and has potential for use for a number of different types of websites. (All of the code is included in the demo so you can take a look to see if this is something you feel comfortable with before installation.)