Visualising scroll position in your Gatsby site

At the start of this year, I rebuilt my blog using Gatsby.

One of the stand-out features which set Gatsby apart from the rest as a static site generator is the plugin eco-system. Why re-invent the wheel if someone else has already designed a perfectly good wheel?

The beauty of web development is the ease in which we can easily peer over the shoulder of someone else, who may well be on the other side of the world, and quickly learn from them.

Working within a well-designed plugin eco-system, we can not only learn from other developers but also turbo-charge our own development by quickly adopting their work and adding it to our own projects to make something that is hopefully more than the sum of its parts.

I'm an impatient person by nature. Have you been stuck on a train or plane with no idea when you'll be moving again? Isn't it utterly infuriating? Others seem to agree.

Whenever there is any major transport disruption event, you'll notice that the first thing a frazzled interviewee on the evening news will complain about is typically not the cause of the disruption but the lack of information provided around it.

A little information goes a long, long way.

You'll notice as you scroll down a post on my blog, your progress is being tracked along the top of the screen from left to right.

This gives you an immediate visual indicator of how long you have left on your journey to the end of this page.

In our time-starved digital world, it's my theory that this little indicator makes it more likely you'll continue reading all the way to the bottom (the quality of my writing notwithstanding.)

I developed this little feature on my blog and saw that it was good. I then bundled it up as a Gatsby plugin for others to pick up and use in their own Gatsby sites.

To add it to your own Gatsby site, install using npm;

npm install --save gatsby-plugin-scroll-indicator

...or Yarn...

yarn add gatsby-plugin-scroll-indicator

...and then add the plugin reference and config options to your gatsby-config.js file:

plugins: [
  {
    resolve: `gatsby-plugin-scroll-indicator`,
    options: {
      // Configure your indicator bar color here
      color: '#BADA55',
    },
  },
];

Restart all the things, clear all the caches and you should now have a visual scroll indicator on your site too. 💥

Source code: Github