@bicycle-codes/scroll-progress NPM

scroll progress

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

demonstration

See bicycle-codes.github.io/scroll-progress for an example with the default CSS.

install

npm i -S @bicycle-codes/scroll-progress

use

You've got options.

Bundler

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'

pre-bundled

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.js

Then 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>

pre-bundled + minifed

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.js

Link to the minified file in HTML:

<body>
    <scroll-progress></scroll-progress>
</div>
<script type="module" src="./scroll-progress.min.js"></script>

css

Override the variable --scroll-progress-color to customize the color.

.scroll-progress {
    --scroll-progress-color: pink;
}

examples

// 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>

pre-bundled

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.css

Then 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>