https://github.com/muhammadmabrouk/webrouk-back-top-scroll-indicator
Webrouk Back Top Scroll Indicator is a lightweight native JavaScript web component for smooth back to top button with a circular progress bar which indicates the current reading progress when scrolling down/up the webpage.
https://github.com/muhammadmabrouk/webrouk-back-top-scroll-indicator
Last synced: 12 months ago
JSON representation
Webrouk Back Top Scroll Indicator is a lightweight native JavaScript web component for smooth back to top button with a circular progress bar which indicates the current reading progress when scrolling down/up the webpage.
- Host: GitHub
- URL: https://github.com/muhammadmabrouk/webrouk-back-top-scroll-indicator
- Owner: MuhammadMabrouk
- License: mit
- Created: 2022-02-07T01:58:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-17T03:43:34.000Z (about 4 years ago)
- Last Synced: 2025-05-29T19:13:57.764Z (about 1 year ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webroukBackTopScrollIndicator
Webrouk Back Top Scroll Indicator is a lightweight native JavaScript web component for smooth back to top button with a circular progress bar which indicates the current reading progress when scrolling down/up the webpage.
- No dependencies
- Lightweight
- Hides on top
- Smooth Scroll
### Demo
---
[CodePen Example](https://codepen.io/muhammad_mabrouk/full/oNoYQdr/)
### Installation
---
Use [NPM](https://www.npmjs.com/package/webrouk-back-top-scroll-indicator/) to download and install it directly in to your project
```sh
$ npm install webrouk-back-top-scroll-indicator --save
```
or include js file manually
```html
```
### Usage
---
Using webroukBackTopScrollIndicator is simple.
```html
```
### Options
| Option | Type | Description | Default |
| ----------- | :----: | ----------- | :----: |
| show-at | `string` | Show the button at y position | `50` |
### Style Customization
---
Expected CSS Variables from inside the component (optional).
```css
webrouk-back-top-scroll-indicator {
--w-primary-color: 218, 95%, 54%; /* HSL color values without the brackets */
--w-diameter-size: 46px;
}
```
### Styleable Component Parts
---
- button
- svg
- path
#### Example:
```css
webrouk-custom-select::part(button) { /* some styles ... */ }
webrouk-custom-select::part(svg) { /* some styles ... */ }
webrouk-custom-select::part(path) { /* some styles ... */ }
```
### License
-------
webroukBackTopScrollIndicator is licensed [MIT](https://choosealicense.com/licenses/mit/).
It can be used for free and without any attribution, in any personal or commercial project.