gatsby-plugin-page-progress

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-plugin-page-progress

Progress indicator for the top of pages as user scrolls

2.2.1

latest

source

npm

Version published: 3 years ago

Maintainers: 1

Weekly downloads: 64; decreased by-46.22%

Install size: 23.6 kB

Weekly downloads

Readme

Source

gatsby-plugin-page-progress

npm npm (tag) npm bundle size npm

Add a page progress indicator to your Gatsby project 😎 The progress bar moves as you scroll down the page.

Page Progress Example

Useful for blog sites and other reading material so users know how far they've read into an article or page.

Options Example

Inside gatsby-config.js

plugins: [
  {
    resolve: "gatsby-plugin-page-progress",
    options: {
      includePaths: ["/", { regex: "^/blog" }],
      excludePaths: ["/blog/beep-beep-lettuce"],
      height: 3,
      prependToBody: false,
      color: `#663399`,
      footerHeight: 500,
      headerHeight: 0,
    },
  },
];

If you'd like the progression bar to appear on all pages of your project, you can simply add the name of the plugin to your plugins array in gatsby-config.js

plugins: ["gatsby-plugin-page-progress"];

Options

`includePaths`

Required: ❌

Accepts: [string | object]

Default: []

Supports multiple paths. This option enables the plugin to include an array of paths. You can use regex to define multiple path inclusions. See examples below

`excludePaths`

Required: ❌

Accepts: [string | object]

Default: []

Supports multiple paths. This option enables the plugin to exclude an array of paths. You can use regex to multiple path exclusions. Defining paths to exclude will take precedence over includePath definitions. See examples below

`prependToBody`

Required: ❌

Accepts: boolean

Default: false

If false, the bar is appended to the <body>. If true, the bar is prepended to the <body>.

`height`

Required: ❌

Accepts: number

Default: 3

Sets the height of the progress bar.

`color`

Required: ❌

Accepts: string

Default: #663399

Sets the color of the progress bar.

`footerHeight`

Required: ❌

Accepts: number

Default: 0

Sets the height of the footer. The width of the progress bar will be scaled appropriately to reach 100% before reaching the page footer.

`headerHeight`

Required: ❌

Accepts: number

Default: 0

Sets the height of the header. The width of the progress bar will be scaled appropriately to reach 100% while offsetting the height of a fixed header and moves the progress bar below the header.

Examples

Only include the root path:

plugins: [
  {
    resolve: "gatsby-plugin-page-progress",
    options: {
      includePaths: ["/"],
      excludePaths: [],
    },
  },
];

Include the root path, plus all paths under the `/blog` route:

plugins: [
  {
    resolve: "gatsby-plugin-page-progress",
    options: {
      includePaths: ["/", { regex: "^/blog" }],
      excludePaths: [],
    },
  },
];

This plugin calls the constructor function for RegExp. That's why we define any regex that we want to use inside an object. For more information on how to write regular expressions using the RegExp constructor use MDN for reference.

Exclude only the root path:

plugins: [
  {
    resolve: "gatsby-plugin-page-progress",
    options: {
      includePaths: [],
      excludePaths: ["/"],
    },
  },
];

Include the root path, plus every path under the `/blog` route, but exclude a specific path under `/blog`:

plugins: [
  {
    resolve: "gatsby-plugin-page-progress",
    options: {
      includePaths: ["/", { regex: "^/blog" }],
      excludePaths: ["/blog/awesome/article"],
    },
  },
];

Include the root path, plus all paths under the `/blog` route, but exclude all paths under `/blog` that end with `'react'`':

plugins: [
  {
    resolve: "gatsby-plugin-page-progress",
    options: {
      includePaths: ["/", { regex: "^/blog" }],
      excludePaths: [{ regex: "^/blog.+react$" }],
    },
  },
];

Remember that exclusions always take precedence over inclusions. In the case above - If the plugin finds any path that begins with /blog and ends with react it will not apply the progress indicator because it already knows to exclude that route 😁 Inversely, if we were on a route under /blog that didn't end with react, it would apply the progress indicator because the exclusion rule wouldn't apply to that route.

Keywords

FAQs

What is gatsby-plugin-page-progress?

Is gatsby-plugin-page-progress popular?

Is gatsby-plugin-page-progress well maintained?

Last updated on 16 Jun 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

gatsby-plugin-page-progress

gatsby-plugin-page-progress

Options Example

Options

includePaths

excludePaths

prependToBody

height

color

footerHeight

headerHeight

Examples

Only include the root path:

Include the root path, plus all paths under the /blog route:

Exclude only the root path:

Include the root path, plus every path under the /blog route, but exclude a specific path under /blog:

Include the root path, plus all paths under the /blog route, but exclude all paths under /blog that end with 'react'':

Keywords

Related posts

OSI to Lead Discussions on Navigating the Challenges of Doing Business with Open Source

Introducing Dependency Visualization: An Interactive Way to See Dependencies at a Glance

`includePaths`

`excludePaths`

`prependToBody`

`height`

`color`

`footerHeight`

`headerHeight`

Include the root path, plus all paths under the `/blog` route:

Include the root path, plus every path under the `/blog` route, but exclude a specific path under `/blog`:

Include the root path, plus all paths under the `/blog` route, but exclude all paths under `/blog` that end with `'react'`':