Animated Progress Bar Plugin

File Size: 65.6 KB
Views Total: 2326
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated Progress Bar Plugin

An Animated Progressbar Plugin built with jQuery that allows you to create a Progress Bar with dynamic loading effect and the remaining time.


1. Include jQuery Library, jQuery UI and javascript in the <head> section:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="js/script.js"></script>

2. Add Css to beautify the Progress Bar:

<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />

3. Add markup:

<div id="progress1">
<div class="percent"></div>
<div class="pbar"></div>
<div class="elapsed"></div>

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