Today we will be looking at a few techniques we can use to show scroll progress for users who are reading a page. This technique is being used on an increasing number of sites, and for good reason; it provides a contextual understanding of investment needed to consume a particular page. As the user scrolls, they are presented with a sense of current progress in different formats. As seen on ia.net Today, we will cover two specific techniques you can employ to show scroll progress, and leave you with a toolset to create your own. Let's get started! Setting up the Document First, we will set up a mock document which will act as our post page. We will be using normalize.css and jQuery, as well as a Google font. Your empty HTML file should look like this: Progress Indicator Animation Next, we will add our fake post content: How Should We Show Progress While Scrolling a Post?
↧