jQuery lightweight Progress Bar

Bookmark and Share


Apache Free License 2.0


Download progress-bar.zip


Restart progress bar demo.


Step 1: Include files

Include the Javascript files for jQuery and for the progress bar:

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery-progress-bar.js"></script>

Step 2: Create HTML

Create HTML elements for the progress bar and for the label(optional).


<div class="progress">
   <div id="progress-label" class="progress-label">
      <!-- Progress text will be rendered here -->
   <div id="progress-container" class="progress-container">
      <!-- Progress bar will be rendered here -->

Step 3: Create the Progress bar

Create a new DG.ProgressBar object like this:

<script type="text/javascript"> var progressBar = new DG.ProgressBar({
   renderTo: "#progress-container",
   renderLabelTo: "#progress-label"
}); </script>

This will create a new progress bar and render it inside <div id="progress-container"> . The label will be rendered to <div id="progress-label">.

Usually, you will load progress from a server. To do this, you'll need to specify three attributes:

  • url: url on the server, example: progress-controller.php
  • data: data sent to the url, example: { "getprogress" : true }
  • pollRate: interval between each poll request to the server in milliseconds(default is 100)
  • responseHandler: This is a function which will be called when there's new progress bar response from the server.

Finally, you need to initiate the first poll request by calling the startPolling method.


<script type="text/javascript">
var progressBarServer = new DG.ProgressBar({
    renderTo: "#progress-container-server",
    renderLabelTo: "#progress-label-server",
    url : "progress-controller.php", // server url
    pollRate: 200,
        "getProgress" : true,
    responseHandler:function(response, progressBar){
        progressBar.setStep(response.current, response.steps);

In the code above, we have set the url to progress-controller.php, and specified that the variables getProgress=true will be passed with each request.

We have also defined the responseHandler function which will respond to each response from the server. In this example, the server have sent response like:

  "steps": 100,
  "current": 3

where steps(100) is the total number of steps, and current(3) is current progress, i.e. 3% completed.

the Response Handler is responsible for updating the progress bar by calling one or more of the update methods:

  • setStep(current, total): Updates the progress bar.
  • setPercent(percent): Updates the progress bar.
  • setLabel(label): Updates the label.

When the response handler is finished, the Progress Bar script will automatically schedule a new call to the server if it's not completed(percent<100).


You may specify different colors than the defaults for the progress bar using the color and colorProgress properties


var progressBarServer = new DG.ProgressBar({

This will show the progress bar with an initial dark color(#999). When the progress bar moves, progress will be indicated with a white color(#FFF).

Height and Corner Radius

The height and corner radius can be configured using the properties:

  • height: Height of progress bar in pixels, example: height:4
  • cornerRadius: Corner radius for all corners in pixels, example: cornerRadius:2. Corner radius should never be greater than half the height.
  • corners: An object defining each corner, example: corners:{ "tl": 2, "tr":2, "bl":0, "br": 0}, where "tl" is top left, "tr" top right, "bl" bottom left and "br" bottom right.

Example code:

var progressBarServer = new DG.ProgressBar({
   corners: { "tl": 2, "tr":2, "bl":0, "br": 0} ",


No one has commented this - be first!

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Unable to save captcha-image.