# scroll-indicator-js

> A simple vanilla JS scroll indicator. No dependencies, best performances.

Latest version **1.0.3** (published 2022-08-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install scroll-indicator-js
pnpm add scroll-indicator-js
yarn add scroll-indicator-js
bun add scroll-indicator-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-08-20 |
| First published | 2022-08-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lioruby |
| Maintainers | lioruby |
| Keywords | javascript, scroll indicator, front-end, beautifull, scroll animation |

## Links

- npm: https://www.npmjs.com/package/scroll-indicator-js
- Repository: https://github.com/Lioruby/scroll-indicator-js
- Homepage: https://github.com/Lioruby/scroll-indicator-js#readme
- Issues: https://github.com/Lioruby/scroll-indicator-js/issues
- npm.io page: https://npm.io/package/scroll-indicator-js

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-08-20
- 1.0.2 — 2022-08-18
- 1.0.1 — 2022-08-18
- 1.0.0 — 2022-08-18

## README

## Scroll Indicator JS
A simple vanilla JS scroll indicator. No dependencies, best performances.


![ezgif-4-f043ff0fe8](https://user-images.githubusercontent.com/71385272/185468248-6180ec1f-6b0f-47a3-bbaf-b35ca1ac6cb2.gif)



## Get Started
With yarn

```sh
yarn add scroll-indicator-js
```
With npm
```sh
npm i scroll-indicator-js
```

To use it in your app

```javascript

// main.js
import scrollIndicator from 'scroll-indicator-js'


scrollIndicator() // Start the scroll indicator on all .scroll-indicator classes
```


## Usage
```html
<!-- On the top of your page -->
<div class="scroll-indicator" data-height="5px" data-position="bottom"></div>

<!-- ..... -->
```

datasets | Value | Default
----- | ----- | -------
height  | px | 3px
position  | top - bottom - left - right | top
color | hex/rgba/linear | linear-gradient(225deg,#ffb938 0%,#ff5729 100%)
reverse | true - false | false

---
_Source: https://npm.io/package/scroll-indicator-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._