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.
npm i -S @substrate-system/scroll-progressSee substrate-system.github.io/scroll-progress for an example with the default CSS.
// index.js
import { ScrollProgress } from '@substrate-system/scroll-progress'
ScrollProgress.define()<!-- index.html -->
<body>
<div id="root">
<scroll-example></scroll-example>
</div>
<script type="module" src="./index.js"></script>
</body>In node or another servers-side runtime, import the /ssr path.
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()
// => '<scroll-progress>...</scroll-progress>'If you "pre-render" this servers-side, then you can include the "light" version, which is just the client-side JS, no rendering logic.
import { define, TAG } from '@substrate-system/scroll-progress/client'
define() // must call CustomElementRegistry.define()
// TAG is the element name
const els = document.querySelector(TAG)This exposes ESM and common JS via package.json exports field.
Import as normal.
// 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()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.
cp ./node_modules/@substrate-system/scroll-progress/dist/browser.min.js ./public/scroll-progress.min.js<body>
<scroll-progress></scroll-progress>
</div>
<script type="module" src="./scroll-progress.min.js"></script>Override the variable --scroll-progress-color to customize the color.
.scroll-progress {
--scroll-progress-color: pink;
}Start a localhost server:
npm start