Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barrymcgee/gatsby-plugin-scroll-indicator
A visual indicator of page scroll on Gatsby websites
https://github.com/barrymcgee/gatsby-plugin-scroll-indicator
gatsby gatsby-plugin gatsbyjs
Last synced: 4 months ago
JSON representation
A visual indicator of page scroll on Gatsby websites
- Host: GitHub
- URL: https://github.com/barrymcgee/gatsby-plugin-scroll-indicator
- Owner: barrymcgee
- Created: 2019-02-18T17:53:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T01:48:53.000Z (5 months ago)
- Last Synced: 2024-09-29T16:12:44.200Z (4 months ago)
- Topics: gatsby, gatsby-plugin, gatsbyjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gatsby-plugin-scroll-indicator
- Size: 3.06 MB
- Stars: 14
- Watchers: 3
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 🤳gatsby-plugin-scroll-indicator
[](https://badge.fury.io/js/gatsby-plugin-scroll-indicator)
[](https://circleci.com/gh/barrymcgee/gatsby-plugin-scroll-indicator/tree/develop)
- 🔥 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
### color (String)
Any solid [hex color code](https://www.color-hex.com/) is valid. e.g.
`color: #663391`
This option will accept any valid value for the [background CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
If not provided, the default value is Gatsby purple themed [CSS gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients):
`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](http://www.globtester.com/) 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
```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`,
},
},
];
```
### Useful links
- Globbing patterns, explained - https://commandbox.ortusbooks.com/usage/parameters/globbing-patterns
- Globtester - https://globster.xyz/