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 👇🏻
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>
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 😁
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
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
The following are the options that SProgress
supports:-
String
This basically customizes the color of the progress bar.
Integer
This can be used to manipulates the height of the progress bar.
Integer
This is used to specify a certain distance for the scrollDistanceEvent
to fire.
With SProgress, the following properties can be customized:-
String
import SProgress from 'sprogress';
SProgress.init({
color: // Your color here in hex |rgb |rgba format
});
Integer
import SProgress from 'sprogress';
SProgress.init({
height: 10,
});
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 */
}
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.
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" /> *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */