A Twitter Bootstrap extension to add progress loader at the top of the page.
Last updated 2 years ago by manjits1991 .
Repository · Original npm · Tarball · package.json
$ cnpm install my-skylo 
SYNC missed versions from official npm registry.


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


//Default options
    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.


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


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.


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.

    //After inserting Loader, animates width to 30%

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



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

Current Tags

  • 0.4.0                                ...           latest (2 years ago)

1 Versions

  • 0.4.0                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (11)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2017 © |