Slick Smooth Top Progress Bars – ToProgress.js

Category: Javascript , Loading , Recommended | June 15, 2015
Author: djyde
Views Total: 2,853
Official Page: Go to website
Last Update: June 15, 2015
License: MIT

Preview:

Slick Smooth Top Progress Bars – ToProgress.js

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()

Leave a Reply