sprogress v1.1.2
Table of Contents
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
$ npm install sprogress --save
$ 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
<script src="https://unpkg.com/sprogress@1.0.2/lib/sprogress.min.js"></script>
Usage
After installing the package, you can simply make use of it by call the init
function provided.
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
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.
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
import SProgress from 'sprogress';
SProgress.init({
color: // Your color here in hex |rgb |rgba format
});
Height
Integer
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.
.scroll-progress {
/* CSS styles here */
}
Contributions
Looking to contribute, then
- simply clone or fork this repo
- create a branch for your
bug-fix
,feature
orcleanup
- 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
/** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* ____ ____ *
* / ___|| _ \ _ __ ___ __ _ _ __ ___ ___ ___ *
* \___ \| |_) | '__/ _ \ / _` | '__/ _ \/ __/ __| *
* ___) | __/| | | (_) | (_| | | | __/\__ \__ \ *
* |____/|_| |_| \___/ \__, |_| \___||___/___/ *
* |___/ *
* *
* Copyrights © 2019 *
* <Author name="Daniel Eze" *
* url="https://twitter.com/theghostyced" /> *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */