jQuery Plugin For Handling Progress Percentage

Progress LGH is a lightweight, framework-agnostic jQuery progress plugin that makes it easier to set, get, and update percentage values in a progress bar component.

Works with popular frameworks like Bootstrap's progress bar component and supports real-time percentage calculation base on the response from an API.

See Also:

• 10 Best Progress Bar (Linear) Components

How to use it:

1. Load the Progress LGH plugin's script after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery-progress-lgh.js"></script>

2. Add a progress bar component (like Bootstrap progressbar) to your webpage.

<div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="demo"></div>

3. Set and get percentage values using the following callback functions.

const progress = new Progress({
      get: function () {
        percentage = percentage + Math.random()*10|0;
        if(percentage>100){
            percentage = 100;
        }
        progress.update(percentage);
      },
      set: function (percentage) {
        switch(type) {
          case 'bootstrap':
            filter.css('width', percentage+'%').text(percentage+'%');
            break;
          case 'layui':
            element.progress(filter, percentage + '%');
            if (index && percentage === 100) {
              layer.close(index);
            }
            break;
          default:
        }
      }
});

4. Or get percentage values base on the response from an API (JSON).

const progress = new Progress({
      url: '/path/to/API',
      data: {
        // parameters here
      },
      set: function (percentage) {
        // update the progress bar
      }
});

5. Start the progress bar when needed.

progress.start();

6. More plugin configurations.

const progress = new Progress({

      // current percentage
      percentage: 0, 

      // debounce options
      debounce: true,
      debouncePercentage: 0,
      
      // progress timer
      pf0: null,

      // debounce timer
      pf1: null, 

      // progress delay
      pf0Delay: 1000,

      // debounce delay
      pf1Delay: 50
      
});

7. More API methods.

// update the progress bar with or without debounce
progress.update(percentage, jump); 

// update the progress bar to 100%
progress.finish();

// reset the progress bar
progress.reset();

---

This awesome jQuery plugin is developed by honguangli. For more Advanced Usages, please check the demo page or visit the official website.