sprogress

Table of Contents

• Introduction
• Usage
• Customization
• 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

$ 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 😁

Customization

With SProgress, the following properties can be customized:-

Color

String

This basically customizes the color of the progress bar.

  [...]
    SProgress.init({
      color: // Your color here in hex |rgb |rgba format
    });
  [...]

Height

Integer

This manipulates the height of the progress bar

  [...]
    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 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