Minimal Top Loading Bar Plugin For Bootstrap - skylo

File Size: 19.9 KB
Views Total: 1812
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="" 
<script src="bootstrap.min.js"></script>
<script src="skylo.js"></script>

2. Initialize the skylo with the following options.


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


4. End the loading bar.


5. Update the loading bar.

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

6. Get the current percentage value.


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.