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: 2 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 (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-17T03:43:34.000Z (over 2 years ago)
• Last Synced: 2024-11-17T19:47:08.412Z (2 months 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.