scroll progress


A progress bar that shows how far down the page you have scrolled,
as a web component.

This is implemented as a "split component",
meaning that it should be easy to render this to a string of HTML in node.

Contents

- Install
- Demonstration
- Example
- ssr
* Client-side
- Modules
* Bundler
* pre-bundled
- CSS
- develop

Install

``sh
npm i -S @substrate-system/scroll-progress
`

Demonstration

See 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()
// => '...'
`

$3

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.

$3

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()
`

$3

This is a bundle of the progress component and its one dependency,
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