A webcomponent that shows scroll progress
npm install @bicycle-codes/scroll-progressA 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.
``sh`
npm i -S @bicycle-codes/scroll-progress
syntax.`js
import '@bicycle-codes/scroll-progress'
import '@bicycle-codes/scroll-progress/css'
// or minified css
import '@bicycle-codes/scroll-progress/min/css'
`$3
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:sh
cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.bundle.js ./public/scroll-progress.js
`Then link to the bundled file, and you can use as an html element.
html
$3
Copy the bundled and minified file to a location that is accessible to your web server:sh
cp ./node_modules/@bicycle-codes/scroll-progress/dist/index.bundle.min.js ./public/scroll-progress.min.js
`Link to the minified file in HTML:
html
css
Override the variable to customize the color.`css
.scroll-progress {
--scroll-progress-color: pink;
}
`examples
js
// index.js
import { ScrollProgress } from '@bicycle-codes/scroll-progress'
`html
`$3
First copy a bundled file to a place where your webserver can access it.sh
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.css
`Then include a script tag in HTML, and use the component like any other HTML element.
html
Example
`develop
Start a localhost server:
sh
npm start
``