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.
import '@bicycle-codes/scroll-progress'
import '@bicycle-codes/scroll-progress/css'
// or minified css
import '@bicycle-codes/scroll-progress/min/css'This is the progress component and its one dependency, raf-scroll, combined into a single file. 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.js
import { ScrollProgress } from '@bicycle-codes/scroll-progress'<!-- index.html -->
<body>
<div id="root">
<scroll-example></scroll-example>
</div>
<script type="module" src="./index.js"></script>
</body>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.js
cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.min.css ./public/scroll-progress.cssThen 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">
<!-- link to the css -->
<link rel="stylesheet" href="./scroll-progress.css">
<title>Example</title>
</head>
<body>
<div id="root">
<scroll-progress></scroll-progress>
</div>
<!-- link to JS -->
<script type="module" src="./scroll-progress.js"></script>
</body>
</html>Start a localhost server:
npm start