Multipage form progress indicator How would I go about adding a progress indicator to my multi page form?

So for example, I would like to have a Heading at the top of each of the form pages/stages. I would like them all to be displayed at all times, but with a "status box" or something similar next to each status, which changes once a certain stage has been completed (all the mandatory fields have been populated).

Any advice on how to achieve this?
Taken from Bala's answer.  I had to do a great deal of work on the code before it worked so I thought I'd paste my corrected code here:

Copy sites/all/modules/webform/templates/webform-form.tpl.php to your sites/all/themes/ folder so that you don't hack the original tpl.

In the sites/all/themes//webform-form.tpl.php copy add the code:

&lt;?php
    if($form['details']['page_count']['#value'] &gt; 1){
        $output_pagenum = '&lt;div class="page-count"&gt;Page '
            . '&lt;span class="actual"&gt;' . $form['details']['page_num']['#value'] . '&lt;/span&gt;' . ' of '
            . '&lt;span class="total"&gt;' . $form['details']['page_count']['#value'] . '&lt;/span&gt;';
        echo $output_pagenum . '&lt;/div&gt;';
        // End of custom code
    }

  // Print out the main part of the form.
  // Feel free to break this up and move the pieces within the array.
  print drupal_render($form['submitted']);

  // Always print out the entire $form. This renders the remaining pieces of the
  // form that haven't yet been rendered above.
  print drupal_render($form);


Then in your js file:

//Progress bar for webforms.
    var actual = $('.actual').text(); //Get the value of the actual page.
    var total = $('.total').text(); //Get the value of the total of pages.

    if(total &gt; 1) { // check if is a single page form and the webform has no breaks
        var percentage = (actual/total)*100; //Divides the actual value between all the pages.
        percentage = percentage + '%';
        var progressbar = '&lt;div id="progress-container" style="background:#c2c2c2;"&gt;'
         + '&lt;div id="progressbar" style="margin-top:10px;background:#762C39;min-height:15px;"&gt;&lt;/div&gt;&lt;/div&gt;';

        $('.page-count').append(progressbar);
        $('#progressbar').css('width', percentage); //Depending on which page break youre on modifies the width of the progress bar.
    }

    //End of Progress Bar