Basic Customizable jQuery Progress Bar Plugin - DioProcess

File Size: 36 KB
Views Total: 3381
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.

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.

opacity: "1",
width: "100"

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