Minimal Top Loading Bar Plugin For Bootstrap - skylo

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.

  • Publication date: 06.02.2018
  • Source