How do I create a progress bar?

Question

I need to implement a progress bar using Drupal 7. This is the code I am actually using.

$form[$name][$name.'_enc'] = array(
  '#type' => 'submit',
  '#value' => t($name.' Enable'),
  // '#submit' => array('submit_'.$name.'_enc'),
  '#ajax' => array(
    'callback' => 'submit_'.$name.'_enc',
    'wrapper' => 'ajax-response-goes-here',
    'method' => 'replace',
    'effect' => 'fade',
    'progress' => array (
      'type' => 'bar',
      'message' => 'convert..',
      'url' => 'misc/progress.js',
      'interval' => '1500'
)

Answer 1

What you set as ['#ajax']['progress']['url'] is wrong: It's not the URL for a JavaScript file, but it's the callback path to use to determine how full the progress bar is. The menu callback should return a value that indicates if the operation has been completed, or it is completed at 10%, 20%, 50%, etc. Looking at the code contained in the progress.js file, I notice the value is expected to be between 0 and 100.

As side note, the value passed in ['#ajax']['progress']['message'] should be passed to t().

Answer 2

Progress bar example:

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Import'),
    '#ajax' => array(
        'callback' => 'import_submit_callback',
        'wrapper' => 'import-form',
        'progress' => array(
            'type' => 'bar',
            'message' => t('Importing..'),
            'url' => 'import/progress', //url to fetch current progress percentage
            'interval' => '1000' //progress bar will refresh in 1 second
        )
    ),
);

Then create menu like this for url 'import/progress' :

$items['import/progress'] = array(
    'title' => t('Import progress'),
    'page callback' => 'import_progress',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
);

Then output json data indicating current status like this in that page callback function:

function import_progress() {
    $progress = array(
        'message' => t('Starting import...'),
        'percentage' => -1,
    );

    $completed_percentage = variable_get('import_status'); // calculate progress percentage here

    if($completed_percentage){
        $progress['message'] = t('Importing...');
        $progress['percentage'] = $completed_percentage ;
    }

    drupal_json_output($progress);
}

Answer 3

I have created one menu call back called sales/progress . Here i have called one function as in below

function sales_progress() { 
   echo '{"percentage":"25","message":"Processing more..."}'; 
}

Here 25 is a static percentage value. You can customize percentage value & message text as your wish.

Periodically the above function will be called. And progress bar value will be updated. For more details reference link