{"id":18751134,"url":"https://github.com/substrate-system/scroll-progress","last_synced_at":"2026-01-12T02:25:39.758Z","repository":{"id":231766793,"uuid":"782144268","full_name":"substrate-system/scroll-progress","owner":"substrate-system","description":"Scroll progress indicator web component","archived":false,"fork":false,"pushed_at":"2025-11-29T04:03:44.000Z","size":88,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-01T04:38:02.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/scroll-progress/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-04T18:10:19.000Z","updated_at":"2025-11-29T04:03:42.000Z","dependencies_parsed_at":"2024-05-07T07:25:43.028Z","dependency_job_id":"60f2ac17-e714-49c2-909b-4e80b983f4c1","html_url":"https://github.com/substrate-system/scroll-progress","commit_stats":null,"previous_names":["bicycle-codes/scroll-progress","substrate-system/scroll-progress"],"tags_count":26,"template":false,"template_full_name":"nichoth/template-ts-browser","purl":"pkg:github/substrate-system/scroll-progress","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fscroll-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fscroll-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fscroll-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fscroll-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/scroll-progress/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fscroll-progress/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332360,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-07T17:14:36.864Z","updated_at":"2026-01-12T02:25:39.728Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scroll progress\n[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/scroll-progress/nodejs.yml?style=flat-square)](https://github.com/substrate-system/scroll-progress/actions/workflows/nodejs.yml)\n[![types](https://img.shields.io/npm/types/@substrate-system/scroll-progress?style=flat-square)](README.md)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/scroll-progress?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/scroll-progress)\n[![gzip size](https://img.shields.io/bundlephobia/minzip/@substrate-system/scroll-progress?style=flat-square)](https://bundlephobia.com/package/@substrate-system/scroll-progress)\n[![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)\n\n\nA progress bar that shows how far down the page you have scrolled,\nas a web component.\n\nThis is implemented as a [\"split component\"](https://www.spicyweb.dev/web-components-ssr-node/),\nmeaning that it should be easy to render this to a string of HTML in node.\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [Install](#install)\n- [Demonstration](#demonstration)\n- [Example](#example)\n- [ssr](#ssr)\n  * [Client-side](#client-side)\n- [Modules](#modules)\n  * [Bundler](#bundler)\n  * [pre-bundled](#pre-bundled)\n- [CSS](#css)\n- [develop](#develop)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## Install\n\n```sh\nnpm i -S @substrate-system/scroll-progress\n```\n\n## Demonstration\n\nSee [substrate-system.github.io/scroll-progress](https://substrate-system.github.io/scroll-progress/)\nfor an example with the default CSS.\n\n## Example\n\n```js\n// index.js\nimport { ScrollProgress } from '@substrate-system/scroll-progress'\n\nScrollProgress.define()\n```\n\n```html\n\u003c!-- index.html --\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\n        \u003cscroll-example\u003e\u003c/scroll-example\u003e\n    \u003c/div\u003e\n\n    \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n## ssr\n\nIn node or another servers-side runtime, import the `/ssr` path.\n\n```js\nimport { html, outerHTML } from '@substrate-system/scroll-progress/ssr'\n\nconst innerHTML = html()\n// does not include the custom element tag, only the inner HTML.\n\nconst element = outerHTML()\n// =\u003e '\u003cscroll-progress\u003e...\u003c/scroll-progress\u003e'\n```\n\n### Client-side\n\nIf you \"pre-render\" this servers-side, then you\ncan include the \"light\" version, which is just the client-side JS, no rendering\nlogic.\n\n```js\nimport { define, TAG } from '@substrate-system/scroll-progress/client'\n\ndefine()  // must call CustomElementRegistry.define()\n\n// TAG is the element name\nconst els = document.querySelector(TAG)\n```\n\n## Modules\n\nThis exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).\n\n### Bundler\n\nImport as normal.\n\n```js\n// this is the full version, with rendering logic\nimport { ScrollProgress } from '@substrate-system/scroll-progress'\nimport '@substrate-system/scroll-progress/css'\n// or minified css\nimport '@substrate-system/scroll-progress/min/css'\n\n// must define the component\nScrollProgress.define()\n```\n\n### pre-bundled\n\nThis is a bundle of the progress component and its one dependency,\n[raf-scroll](https://github.com/substrate-system/raf-scroll).\n\nIt is minifed, and can be directly included in the HTML. This will\ndefine the component with its default name.\n\nThis is appropriate for SSR situations only. In the interest of keeping file\nsizes small, this cannot render.\n\n#### Copy\n\n```sh\ncp ./node_modules/@substrate-system/scroll-progress/dist/browser.min.js ./public/scroll-progress.min.js\n```\n\n#### Link\n\n```html\n\u003cbody\u003e\n    \u003cscroll-progress\u003e\u003c/scroll-progress\u003e\n\u003c/div\u003e\n\u003cscript type=\"module\" src=\"./scroll-progress.min.js\"\u003e\u003c/script\u003e\n```\n\n----------------------------------------------------------------------\n\n\n## CSS\n\nOverride the variable `--scroll-progress-color` to customize the color.\n\n```css\n.scroll-progress {\n    --scroll-progress-color: pink;\n}\n```\n\n## develop\n\nStart a localhost server:\n\n```sh\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fscroll-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fscroll-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fscroll-progress/lists"}