Simply-progress-bar NPM

Simply Progress Bar

Progress Bar created on vanilla JavaScript (ES6) and CSS. Simple and configurable.

Using

How to use Simply Progress Bar. 1. npm i simply-progress-bar 2. Import SimplyProgressBar as import SimplyProgressBar from 'simply-progress-bar'. 3. Create SimplyProgressBar instance and pass configuration.

const config = {elem: 'app', isSimulatedProgress: true, showProgressLabel: true, finishMessage: 'finished', hideOnFinish: false}
const progress = SimplyProgressBar(config);

Call .setProgress() method that will start progress bar to show progress. You may pass to this method real data as well by using Observable or function generator or whatever else.

// Fake progress
const config = {elem: 'app', isSimulatedProgress: true, showProgressLabel: true, finishMessage: 'finished', hideOnFinish: true}
const progress = SimplyProgressBar(config);
progress.setProgress();
// Real data progress
const config = {elem: 'app', isSimulatedProgress: false, showProgressLabel: true, finishMessage: 'finished', hideOnFinish: true}
const progress = SimplyProgressBar(config);
someAsyncService.fetchData().subscribe(() => {
    data => progress.setProgress(data);
});

Configuration

How to set configuartion. 1. elem: string - name of the element where progress bar will be added. 2. isSimulatedProgress: boolean - whether real data will be supported via .setProgress or data loading will e simulated. 3. showProgressLabel: boolean - whether to show progress label (e.g. 'x%') or not. 4. finishMessage: string - message to show when progress equal to 100%. 5. hideOnFinish: boolean - whether to hide progress bar on 100% or not.