Basic Customizable jQuery Progress Bar Plugin - DioProcess

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.