🤳gatsby-plugin-scroll-indicator

• 🔥 Easily add a page scroll indicator to your Gatsby site.
• 👨🏼‍💻A 3px high indicator bar will progress along the top of your viewport as you scroll down the page.
• 🎨 The color, height, paths and z-index of the indicator bar are all configurable options.

Install

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

Quick start

These options are not required. To have a 3px high, Gatsby purple (#663391) scroll indicator on all of your pages, add the plugin to your plugins array in gatsby-config.js:

  ...
  plugins: [
    `gatsby-plugin-scroll-indicator`
  ]
  ...

Options

color (String)

Any solid hex color code is valid. e.g.

color: #663391

This option will accept any valid value for the background CSS property.

If not provided, the default value is Gatsby purple themed CSS gradient:

linear-gradient(to right, #CC99F7, #663391)

height (String)

The height of the scroll indicator, in pixels.

If not provided, the default height is 3px.

paths (Array of globbing patterns)

An array of globbing patterns to specify where the scroll indicator should show.

If not provided, the indicator will show for all paths.

zIndex (String)

The z-index option specifies the stack order of the indicator element.

If not provided, the default value is 9999.

Example

// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-scroll-indicator`,
    options: {
      // Configure color of the scroll indicator
      color: "#663391",
      // Height of the scroll indicator
      height: "3px",
      // Configure paths where the scroll indicator will appear
      paths: ["/", "/blog/**"],
      // Configure the z-index of the indicator element
      zIndex: `9999`,
    },
  },
];

Useful links

• Globbing patterns, explained - https://commandbox.ortusbooks.com/usage/parameters/globbing-patterns
• Globtester - https://globster.xyz/