ManFridayy / skylo

Twitter Bootstrap Extension to add progress bar at the top of the page.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Skylo

Required Library

  • Twitter Bootstrap 2.3.2 or Twitter Bootstrap 3.0

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

$(document).skylo({
    state: 'info',
    inchSpeed: 200,
    initialBurst: 5
});

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.


Methods

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

$(document).skylo('start');

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

$(document).skylo('end');

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

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

get: Returns the current loader's width percentage.

$(document).skylo('get');

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

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

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

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

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

$(document).skylo('end');

Credits:

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

About

Twitter Bootstrap Extension to add progress bar at the top of the page.