ForProgress

A simple but flexible progress bar for single-page applications, written in TypeScript. Used at CompareDial

Install

$ npm i forprogress

CommonJS

const ForProgress = require('forprogress');

ES6

import ForProgress from 'ForProgress';

HTML

<script src="https://unpkg.com/forprogress@2.1.5"></script>

Usage

const bar = new ForProgress();

bar.start();

// a request that takes time...

bar.done();

Advanced usage

bar.setPercent(30); // Set progress percent to 30

bar.addPercent(40); // Add 40 to the current progress percent

const currentPercent = bar.getPercent(); // Return current progress percent
console.log(currentPercent); // 70

bar.pause(); // Pause auto incrementation

bar.resume(); // Resume auto incrementation

Configuration

You can change the default settings by passing an object at class initialisation.

color (default: 'red')

Set the color of the progress bar, using any valid CSS color data type. For a gradient, use an array of colors.

const bar = new ForProgress({ color: 'red' }); // Single color

const bar = new ForProgress({ color: ['green', '#0000FF', 'purple'] }); // Gradient

backgroundColor (default: 'transparent')

Set the background color of the progress bar, using any valid CSS color data type.

const bar = new ForProgress({ backgroundColor: 'transparent' });

autoIncrementEnabled (default: true)

Enable or disable progress bar auto incrementation.

const bar = new ForProgress({ autoIncrementEnabled: true });

autoIncrementSpeed (default: 100)

The interval speed between auto incrementations, in milliseconds. Lower is faster.

const bar = new ForProgress({ autoIncrementSpeed: 100 });

autoIncrementMaxPercent (default: 1)

The maximum progress percent increase between auto incrementations. A random number will be chosen between 0.1 and autoIncrementMaxPercent for each interval.

const bar = new ForProgress({ autoIncrementMaxPercent: 1 });

autoIncrementInitialPercent (default: 20)

Set the initial progress percent. Only applies when autoIncrementEnabled is true.

const bar = new ForProgress({ autoIncrementInitialPercent: 20 });

height (default: 3)

The height of the progress bar in px.

const bar = new ForProgress({ height: 3 });

appendTo (default: 'body')

The CSS query selector to append the progress bar to.

const bar = new ForProgress({ appendTo: 'body' });

useCustomCss (default: false)

Set to true to disable automatic style sheet injection, allowing you to use your own external style sheet. Copy ForProgress.scss as a reference.

If true, default and custom settings realted to styling will be ignored and not applied to elements. Therefore, you must uncomment the commented properties in your copy of ForProgress.scss and change them to your liking.

const bar = new ForProgress({ useCustomCss: false });

spinnerEnabled (default: true)

Enable or disable the spinner.

const bar = new ForProgress({ spinnerEnabled: true });

spinnerColor (default: 'grey')

The color of the spinner, using any valid CSS color data type.

const bar = new ForProgress({ spinnerColor: 'grey' });

spinnerSize (default: 20)

The size of the spinner in px.

const bar = new ForProgress({ spinnerSize: 20 });

spinnerSpeed (default: 750)

The speed at which the spinner completes 360 degrees, in milliseconds. Lower is faster.

const bar = new ForProgress({ spinnerSpeed: 750 });

© Adrian Vincent | MIT License