forprogress v2.1.5
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 });