Minimal Top Loading Bar Plugin For Bootstrap - skylo

skylo is a jQuery loading indicator plugin which utilizes Bootstrap's progressbar component to generate a dynamic content loading bar at the top of the webpage.

Alternative plugins:

• Easy Top Loading Bar Plugin For jQuery - loadBar
• Youtube Inspired Top Loading Bar Plugin with jQuery - progressbar
• jQuery Plugin For Slim Top Ajax Loading Bar

How to use it:

1. Include the jQuery skylo plugin's files and other required resources on the webpage.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="bootstrap.min.js"></script>
<script src="skylo.js"></script>

2. Initialize the skylo with the following options.

$.skylo({

  // Info, Success, Warning, Danger
  state: 'info',

  // Animation speed in milliseconds
  inchSpeed: 200,

  // Range 1 - 100.
  initialBurst: 5,

  // Flat style loading bar
  flat: false
  
});

3. Star the loading bar.

$.skylo('start');

4. End the loading bar.

$.skylo('end');

5. Update the loading bar.

$.skylo('set',30); // 30%

6. Get the current percentage value.

$.skylo('get')

7. Increase the loading manually.

$.skylo('inch',10); // +10%

---

This awesome jQuery plugin is developed by colintoh. For more Advanced Usages, please check the demo page or visit the official website.