Basic Customizable jQuery Progress Bar Plugin - DioProcess
File Size: | 36 KB |
---|---|
Views Total: | 3356 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin that renders a fully customizable progress bar to visualize the progression of page loads or Ajax requests.
How to use it:
1. Import jQuery JavaScript library and the jQuery DioProcess plugin into your web page.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="DioProgress.js"></script>
2. The basic CSS to style the progress bars.
div.dioprogress_radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } div.dioprogress_size_l { height: 5px; } div.dioprogress_size_xl { height: 20px; } div.dioprogress_padding { padding: 5px; }
3. Create an DIV element to place the progress bar.
<div id="progressBar"></div>
4. The Javascript to append a progress bar to the DIV element you just created.
$("#progressBar").appendSimpleProgressBar({ background_box: "#EEE", // background color of the container background_bar: "green", // background color of the progress bar width: "0" // width });
5. Animate the progress bar with fast or slow animations.
$("#progressBar").slow({ opacity: "1", width: "100" }); // or $("#progressBar").fast({ opacity: "1", width: "100" });
This awesome jQuery plugin is developed by edudioniz. For more Advanced Usages, please check the demo page or visit the official website.