Smart Progress Bar

Easly create the pop-up bar with several progress elements in one window

Live Template

Full Documentation

Usage

1. Include Bar. If you want use as:

   • NPM add to project

   npm install smart-progress-bar

   and import it

   import { SmartProgressBar } from "smart-progress-bar";

   • MODULE copy file from this (or minify version) to your project

   <script type="module">
   import { SmartProgressBar } from "./smartprogressbar.esm.js";
   ...
   </script>

   • iife-style (you need use global object SPB) copy file from this (or minify version) to your project

   <script src="smartprogressbar.iife.js"></script>
   <script>
       ...
   </script>

2. Setting up the bar if needed (default settings)

   const Settings = {
       //  selector a place for place a bar window
       whereSelector: "body", 
       // show pop-up immediately
       show: true, 
       //  displayed text
       headerText: "Loading",
       // display in compact size
       minimize: false,
       // enable change size on click
       changeSizeOnClick: true
   }
   const ProgressBar = new SmartProgressBar( Settings );

3. After that, you need to create an instance of progress (one or more) like that:

    const first = ProgressBar.addProgress({
        // name of your progress
        name: "HungryAlphaBlueWolf.mp4",
        // start procent
        progress: 10,
    });

4. Now you can change progress anywhere:

    first.progress = 58;

5. If you want delete progress - use this:

    ProgressBar.removeProgress(first);

6. And you can hide main window with hide():

   ProgressBar.hide();