@bicycle-codes/scroll-progress

v0.0.15

Published

24 days ago

A webcomponent that shows scroll progress

Downloads

195

0High
0Medium
0Low

nichoth

scroll progress component

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, 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)

pre-bundled

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

JS

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

*/

HTML

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

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">
    <title>Example</title>
</head>
<body>
    <div id="root">
        <scroll-progress></scroll-progress>
    </div>
    <script type="module" src="./scroll-progress.js"></script>
</body>
</html>

develop

Start a localhost server:

npm start

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme