A progress bar that shows how far down the page you have scrolled, implemented as a web component.
See bicycle-codes.github.io/scroll-progress for an example with the default CSS.
npm i -S @bicycle-codes/scroll-progressYou've got options.
Use this with a bundler by using import syntax, and calling and Tonic.add:
import Tonic from '@bicycle-codes/tonic'
import { ScrollProgress } from '@bicycle-codes/scroll-progress'
import '@bicycle-codes/scroll-progress/index.css'
function ScrollExample () {
return this.html`
<scroll-progress class="scroll example" id="example"></scroll-progress>
`
}
Tonic.add(ScrollProgress)
Tonic.add(ScrollExample)First copy the bundled file to a location that is accessible to your web server:
cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.bundle.js ./public/scroll-progress.jsThen link to the bundled file, and you can use as an html element.
<body>
<scroll-progress></scroll-progress>
</div>
<script type="module" src="./scroll-progress.js"></script>Copy the bundled and minified file to a location that is accessible to your web server:
cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.bundle.min.js ./public/scroll-progress.min.jsLink to the minified file in HTML:
<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;
}// index.ts
import Tonic from '@bicycle-codes/tonic'
import { ScrollProgress } from '@bicycle-codes/scroll-progress'
import '@bicycle-codes/scroll-progress.css'
function ScrollExample () {
return this.html`
<scroll-progress class="scroll example" id="example"></scroll-progress>
`
}
Tonic.add(ScrollProgress)
Tonic.add(ScrollExample)
/*
in HTML, you would link to your compiled file, then use the root
element as an HTML element:
<div id="root">
<scroll-example></scroll-example>
</div>
<script type="module" src="./index.ts"></script>
*/First copy a bundled file to a place where your webserver can access it.
cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.bundle.min.js ./public/scroll-progress.jsThen include a script tag in HTML, and use the component like any other HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<div id="root">
<scroll-progress></scroll-progress>
</div>
<script type="module" src="./scroll-progress.js"></script>
</body>
</html>Start a localhost server:
npm start