🤳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:

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

Options

$3

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)

$3

The height of the scroll indicator, in pixels.

If not provided, the default height is 3px.

$3

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

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

$3

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

If not provided, the default value is 9999.

Example

`javascript
// 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,
},
},
];
``

$3

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