Scrolles NPM | npm.io

Scrolles

A deadly simple and highly customizable scroll progress indicator

Installation

npm i scrolles

Usage

Import the function and pass the optional configuration:

import { Scrolles } from 'scrolles';

Scrolles({
  /* The elements selector. USe a custom selector to which bind the indicator */
  selector?: string = '[data-scrolles]',
  /* Set the progression mode. If set to `cotinuous` will let the indicator progress as you scroll the content, while `steps` the progress is incremented by a fixed amount. */
  mode?: 'continuous' | 'steps' = 'continuous',
  /** The position of the indicator */
  position?: 'top' | 'bottom' = 'top';
  /** The progress direction. If `true` the indicator will grow from the "end" to start */
  reverse?: boolean = false;
});

Then you can add the selector you've defined to any not-void/replaced element (any element that can contains pseudo elements):

<html lang="en" data-scrolles>
   <head>
   </head>
   <body>
      <div data-scrolles>
         ....
      </div>
   </body>
</html>

Finally, add this small and optional CSS snippet if you want to customize the progress indicator, by changing the default values.

[data-scrolles]{
   --scrolles-height: 3px;
   --scrolles-fill: hotpink;
   --scrolles-margin: 0;
   --scrolles-easing: cubic-bezier(0.25, 1, 0.5, 1);
}