Skylo

Required Library

Required Files

Download skylo.js and skylo.css. Include them below bootstrap.js and bootstrap.css respectively. Check out the examples in the examples folder.

Demo And Documentation

Skylo Demo And Docs

Options

//Default options
$.skylo({
    state: 'info',
    inchSpeed: 200,
    initialBurst: 5,
    flat: false
});

state ["info", "success", "warning", "danger"] : Customizes the theme of the progress bar. Uses the same parameters as Bootstrap uses for buttons.

inchSpeed (ms): Determine the speed of the inching motion.

initialBurst (1 - 100): The initial length of the loader that you want to load.

flat (true/false): If flat is set to true, the animated striped UI of the progress bar will be removed.

start: This will initiate the loader with a initial burst of length.

$.skylo('start');

end: The loader will reach 100% and then fade out.

$.skylo('end');

set(width): The loader's width will be animated to the percentage stated. Ranges from 1 - 100.

$.skylo('set',50); //Set width to 50%

get: Returns the current loader's width percentage.

$.skylo('get');

inch: Loader will inch forward according to the parameters set.

$.skylo('inch',10); //Inch forward by 10%

show(callback): Loader will be inserted into the DOM and a callback function will be called.

 $.skylo('show',function(){
    //After inserting Loader, animates width to 30%
    $.skylo('set',30);
 });

remove: Remove Loader from the DOM. Normally unused. Just use ```end`` method to complete the animation.

$.skylo('end');

Thanks to 2359 Media for providing the space and time for me to finish this plugin.