{"id":13630433,"url":"https://github.com/devjmetivier/gatsby-plugin-page-progress","last_synced_at":"2025-07-17T02:09:07.598Z","repository":{"id":42974107,"uuid":"180485676","full_name":"devjmetivier/gatsby-plugin-page-progress","owner":"devjmetivier","description":"A progress bar for Gatsby pages 💜","archived":false,"fork":false,"pushed_at":"2023-01-07T04:18:50.000Z","size":737,"stargazers_count":25,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-08T16:56:13.050Z","etag":null,"topics":["gatsby","gatsby-plugin","indicator","plugin","progress","progressbar","scroll"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devjmetivier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-10T02:27:19.000Z","updated_at":"2024-05-28T11:24:20.000Z","dependencies_parsed_at":"2023-02-06T11:31:20.682Z","dependency_job_id":null,"html_url":"https://github.com/devjmetivier/gatsby-plugin-page-progress","commit_stats":null,"previous_names":["dmetivier/gatsby-plugin-page-progress"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjmetivier%2Fgatsby-plugin-page-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjmetivier%2Fgatsby-plugin-page-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjmetivier%2Fgatsby-plugin-page-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjmetivier%2Fgatsby-plugin-page-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devjmetivier","download_url":"https://codeload.github.com/devjmetivier/gatsby-plugin-page-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253112074,"owners_count":21856070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-plugin","indicator","plugin","progress","progressbar","scroll"],"created_at":"2024-08-01T22:01:42.428Z","updated_at":"2025-05-08T16:56:18.882Z","avatar_url":"https://github.com/devjmetivier.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# gatsby-plugin-page-progress\n\n![npm](https://img.shields.io/npm/v/gatsby-plugin-page-progress.svg?color=green)\n![npm (tag)](https://img.shields.io/npm/v/gatsby-plugin-page-progress/beta.svg?color=blue)\n![npm bundle size](https://img.shields.io/bundlephobia/min/gatsby-plugin-page-progress.svg)\n![npm](https://img.shields.io/npm/dt/gatsby-plugin-page-progress.svg)\n\nAdd a page progress indicator to your Gatsby project 😎\nThe progress bar moves as you scroll down the page.\n\n![Page Progress Example](https://i.imgur.com/N1jdBST.gif)\n\n\u003e Useful for blog sites and other reading material so users know how far they've read into an article or page.\n\n## [Install](#install)\n\n`npm i gatsby-plugin-page-progress`\n\n## [Options Example](#options-example)\n\nInside `gatsby-config.js`\n\n```js\nplugins: [\n  {\n    resolve: \"gatsby-plugin-page-progress\",\n    options: {\n      includePaths: [\"/\", { regex: \"^/blog\" }],\n      excludePaths: [\"/blog/beep-beep-lettuce\"],\n      height: 3,\n      prependToBody: false,\n      color: `#663399`,\n      footerHeight: 500,\n      headerHeight: 0,\n    },\n  },\n];\n```\n\nIf you'd like the progression bar to appear on all pages of your project,\nyou can simply add the name of the plugin to your plugins array in `gatsby-config.js`\n\n```js\nplugins: [\"gatsby-plugin-page-progress\"];\n```\n\n## [Options](#options)\n\n#### `includePaths`\n\nRequired: ❌\n\nAccepts: `[string | object]`\n\nDefault: `[]`\n\n\u003e 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**\n\n#### `excludePaths`\n\nRequired: ❌\n\nAccepts: `[string | object]`\n\nDefault: `[]`\n\n\u003e 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**\n\n#### `prependToBody`\n\nRequired: ❌\n\nAccepts: `boolean`\n\nDefault: `false`\n\n\u003e If `false`, the bar is appended to the `\u003cbody\u003e`. If `true`, the bar is prepended to the `\u003cbody\u003e`.\n\n#### `height`\n\nRequired: ❌\n\nAccepts: `number`\n\nDefault: `3`\n\n\u003e Sets the `height` of the progress bar.\n\n#### `color`\n\nRequired: ❌\n\nAccepts: `string`\n\nDefault: `#663399`\n\n\u003e Sets the `color` of the progress bar.\n\n#### `footerHeight`\n\nRequired: ❌\n\nAccepts: `number`\n\nDefault: `0`\n\n\u003e Sets the height of the footer. The width of the progress bar will be scaled appropriately to reach 100% before reaching the page footer.\n\n#### `headerHeight`\n\nRequired: ❌\n\nAccepts: `number`\n\nDefault: `0`\n\n\u003e 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.\n\n## [Examples](#examples)\n\n#### Only include the root path:\n\n```js\nplugins: [\n  {\n    resolve: \"gatsby-plugin-page-progress\",\n    options: {\n      includePaths: [\"/\"],\n      excludePaths: [],\n    },\n  },\n];\n```\n\n#### Include the root path, plus all paths under the `/blog` route:\n\n```js\nplugins: [\n  {\n    resolve: \"gatsby-plugin-page-progress\",\n    options: {\n      includePaths: [\"/\", { regex: \"^/blog\" }],\n      excludePaths: [],\n    },\n  },\n];\n```\n\n\u003e This plugin calls the constructor function for [RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Creating_a_regular_expression). 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Description).\n\n#### Exclude only the root path:\n\n```js\nplugins: [\n  {\n    resolve: \"gatsby-plugin-page-progress\",\n    options: {\n      includePaths: [],\n      excludePaths: [\"/\"],\n    },\n  },\n];\n```\n\n#### Include the root path, plus every path under the `/blog` route, but exclude a specific path under `/blog`:\n\n```js\nplugins: [\n  {\n    resolve: \"gatsby-plugin-page-progress\",\n    options: {\n      includePaths: [\"/\", { regex: \"^/blog\" }],\n      excludePaths: [\"/blog/awesome/article\"],\n    },\n  },\n];\n```\n\n#### Include the root path, plus all paths under the `/blog` route, but exclude all paths under `/blog` that end with `'react'`':\n\n```js\nplugins: [\n  {\n    resolve: \"gatsby-plugin-page-progress\",\n    options: {\n      includePaths: [\"/\", { regex: \"^/blog\" }],\n      excludePaths: [{ regex: \"^/blog.+react$\" }],\n    },\n  },\n];\n```\n\n\u003e 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevjmetivier%2Fgatsby-plugin-page-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevjmetivier%2Fgatsby-plugin-page-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevjmetivier%2Fgatsby-plugin-page-progress/lists"}