https://github.com/substrate-system/scroll-progress
Scroll progress indicator web component
https://github.com/substrate-system/scroll-progress
Last synced: 5 months ago
JSON representation
Scroll progress indicator web component
- Host: GitHub
- URL: https://github.com/substrate-system/scroll-progress
- Owner: substrate-system
- License: other
- Created: 2024-04-04T18:10:19.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-29T04:03:44.000Z (7 months ago)
- Last Synced: 2025-12-01T04:38:02.626Z (7 months ago)
- Language: TypeScript
- Homepage: https://substrate-system.github.io/scroll-progress/
- Size: 85.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# scroll progress
[](https://github.com/substrate-system/scroll-progress/actions/workflows/nodejs.yml)
[](README.md)
[](README.md)
[](https://semver.org/)
[](https://packagephobia.com/result?p=@substrate-system/scroll-progress)
[](https://bundlephobia.com/package/@substrate-system/scroll-progress)
[](LICENSE)
A progress bar that shows how far down the page you have scrolled,
as a web component.
This is implemented as a ["split component"](https://www.spicyweb.dev/web-components-ssr-node/),
meaning that it should be easy to render this to a string of HTML in node.
Contents
- [Install](#install)
- [Demonstration](#demonstration)
- [Example](#example)
- [ssr](#ssr)
* [Client-side](#client-side)
- [Modules](#modules)
* [Bundler](#bundler)
* [pre-bundled](#pre-bundled)
- [CSS](#css)
- [develop](#develop)
## Install
```sh
npm i -S @substrate-system/scroll-progress
```
## Demonstration
See [substrate-system.github.io/scroll-progress](https://substrate-system.github.io/scroll-progress/)
for an example with the default CSS.
## Example
```js
// index.js
import { ScrollProgress } from '@substrate-system/scroll-progress'
ScrollProgress.define()
```
```html
```
## ssr
In node or another servers-side runtime, import the `/ssr` path.
```js
import { html, outerHTML } from '@substrate-system/scroll-progress/ssr'
const innerHTML = html()
// does not include the custom element tag, only the inner HTML.
const element = outerHTML()
// => '...'
```
### Client-side
If you "pre-render" this servers-side, then you
can include the "light" version, which is just the client-side JS, no rendering
logic.
```js
import { define, TAG } from '@substrate-system/scroll-progress/client'
define() // must call CustomElementRegistry.define()
// TAG is the element name
const els = document.querySelector(TAG)
```
## Modules
This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
### Bundler
Import as normal.
```js
// this is the full version, with rendering logic
import { ScrollProgress } from '@substrate-system/scroll-progress'
import '@substrate-system/scroll-progress/css'
// or minified css
import '@substrate-system/scroll-progress/min/css'
// must define the component
ScrollProgress.define()
```
### pre-bundled
This is a bundle of the progress component and its one dependency,
[raf-scroll](https://github.com/substrate-system/raf-scroll).
It is minifed, and can be directly included in the HTML. This will
define the component with its default name.
This is appropriate for SSR situations only. In the interest of keeping file
sizes small, this cannot render.
#### Copy
```sh
cp ./node_modules/@substrate-system/scroll-progress/dist/browser.min.js ./public/scroll-progress.min.js
```
#### Link
```html
```
----------------------------------------------------------------------
## CSS
Override the variable `--scroll-progress-color` to customize the color.
```css
.scroll-progress {
--scroll-progress-color: pink;
}
```
## develop
Start a localhost server:
```sh
npm start
```