Slick Smooth Top Progress Bars – ToProgress.js

Preview:

Description:

ToProgress is a lightweight JavaScript library used to create slim, smooth, CSS3 animated progress bar on the top of your webpage, as you seen on Youtube.

How to use it:

Import the ToProgress library into the document.

<script src="path/to/ToProgress.min.js"></script>

Override the default options in the options object.

var options = {
    id: 'top-progress-bar',
    color: '#F44336', 
    height: '2px', 
    duration: 0.2
}

Display a progress bar.

var progressBar = new ToProgress(options);

API.

// increase 15%
progressBar.increase(15, CALLBACK);
// decrease 15%
progressBar.decrease(15, CALLBACK);
// set to 15%
progressBar.setProgress(15, CALLBACK);
// hide the progress
progressBar.hide();
// reset the progress
progressBar.reset();
// finish the progress
progressBar.finish();
// return current progress
progressBar.getProgress()