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'
  • Its usually CSS property changes. Based on server response keep on increasing width till you reach 100 % – GoodSp33d Feb 27 '12 at 11:56
  • 2
    Have you considered using the Batch API? – Arosboro Mar 18 '12 at 23:59

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().


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

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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.