Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theghostyced/sprogress
⭐️ Simple on-scroll progress bar
https://github.com/theghostyced/sprogress
Last synced: 3 months ago
JSON representation
⭐️ Simple on-scroll progress bar
- Host: GitHub
- URL: https://github.com/theghostyced/sprogress
- Owner: theghostyced
- License: mit
- Created: 2019-07-29T00:21:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-07-30T15:38:01.000Z (over 5 years ago)
- Last Synced: 2024-09-29T13:41:00.383Z (4 months ago)
- Language: JavaScript
- Size: 12.9 MB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Table of Contents
- [Introduction](#introduction)
- [Usage](#usage)
- [Events](#events)
- [Options](#options)
- [Customization](#customization)
- [Contributions](#contributions)
## Introduction
SProgress is a simple on-scroll progress bar developed for web apps. It aims to give a user feedback as to how far they are in an article.
Inspired by Alligator.io. A brief usage can be seen below 👇🏻
## Installation
**Npm or Bower**
To install the package via npm, simply run the command below
```bash
$ npm install sprogress --save
```
```bash
$ yarn add sprogress -S
```
**Via CDN links**
You can also make use of the cdn links if you dont want to install the package. Add the following to your `html` file
```javascript
```
### Usage
After installing the package, you can simply make use of it by call the `init` function provided.
```javascript
import SProgress from 'sprogress';
SProgress.init({});
```
The `init` function takes in an object which is used to customize the SProgress bar. More on that below
**N.B** - If you are using the CDN, you don't need to call the init method simply add the `script` tag and you all set 😁
## Events
`SProgress` also triggers the `scrollDistanceEvent` event when the specified `scrollDistanceTarget` is reached by the progress bar. This can be useful if you want to display
a feature to the user(maybe a newsletter modal) when they are half way into the page/article.
**`Event`** - `scrollDistanceEvent`
### Implementation
```javascript
import SProgress from 'sprogress';
SProgress.init({
scrollDistanceTarget: 60,
});
document.addEventListener('scrollDistanceEvent', displayNewsLetterModal, {
once: true,
});
```
**N.B** - The `once` object passed to the `addEventListener` in other to invoke the `handler` only once. Highly recommended
if you don't want the handler trigger more than once. Have a look here to learn more
## Options
The following are the options that `SProgress` supports:-
### color
**`String`**
This basically customizes the color of the progress bar.
### height
**`Integer`**
This can be used to manipulates the height of the progress bar.
### scrollDistanceTarget
**`Integer`**
This is used to specify a certain distance for the `scrollDistanceEvent` to fire.
## Customization
With SProgress, the following properties can be customized:-
### Color
**`String`**
```javascript
import SProgress from 'sprogress';
SProgress.init({
color: // Your color here in hex |rgb |rgba format
});
```
### Height
**`Integer`**
```javascript
import SProgress from 'sprogress';
SProgress.init({
height: 10,
});
```
### Using Classname
The `default` classname for the progress bar is `scroll-progress` and with that you can create you very own css file and manipulate the class to best suit your needs.
```css
.scroll-progress {
/* CSS styles here */
}
```
## Contributions
Looking to contribute, then
- simply clone or fork this repo
- create a branch for your `bug-fix`, `feature` or `cleanup`
- raise a pull request
- if deemed worthy 😁 the branch will be merged ASAP.
## Issues
As they say, `Software is written by humans and therefore has bugs` so if you notice any bug while using the library, do raise an issue
```javascript
/** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* ____ ____ *
* / ___|| _ \ _ __ ___ __ _ _ __ ___ ___ ___ *
* \___ \| |_) | '__/ _ \ / _` | '__/ _ \/ __/ __| *
* ___) | __/| | | (_) | (_| | | | __/\__ \__ \ *
* |____/|_| |_| \___/ \__, |_| \___||___/___/ *
* |___/ *
* *
* Copyrights © 2019 *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
```