Drupal ajax form submit progress overlay

Use below code to show progress bar while submitting ajax form in Drupal.

/* ajax form submit throbber style */ 
.custom_wrap .ajax-progress .message,
.custom_wrap .ajax-progress-throbber .message{
  color: white;
  font-size: 20px;
  padding: 30px;
}
.custom_wrap .ajax-progress .throbber,
.custom_wrap .ajax-progress-throbber .throbber {
  float: none;
  margin: 250px auto 0 auto;
  width: 128px;
  height: 128px;
  background: url("../images/ajax-throbber.gif") no-repeat center center;
}
.custom_wrap .ajax-progress,
.custom_wrap .ajax-progress-throbber {
  width: 100%;
  height: 100%;
  background-color: #000;
 opacity: 0.6;
 filter: alpha(opacity=60);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  vertical-align: middle;
  text-align: center;
}

Drupal 7 ajax form validation and submit - Ajax framework commands

Ajax is one of the best interactive way to validate and submit Drupal custom form.
Using below steps, we can achieve ajax form validation and submit.

Steps :
1) Declare form elements
2) Call back definitions.

1) Declare form elements.

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('SUBMIT'),
  '#validate' => array('validate_callback'), // custom form validate.
  '#ajax' => array(
    'callback' => 'submit_callback',
    'effect' => 'fade',
    'wrapper' => 'specific-wrapper',
    'event' => 'click',
    'progress' => array('message' => '', 'type' => 'throbber'),
  ),
);

2) Call back definitions.

function submit_callback($form, $form_state) {
  if (form_get_errors()) {
    $form_state['rebuild'] = TRUE;
    return $form;
  }

  $response = my_form_submit($form, $form_state); // write your form submit logic here.
  return $response;
}

"validate_callback" is our normal hook_form_validate(). 

NOTE : Reach me through the contact form if you have any question.

Update:
Recently I have worked on "Ajax framework commands", this is also very useful Technic to achieve ajax form submit & validation.

1) Declare form elements to use ajax framework.

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('SUBMIT'),
  '#ajax' => array(
    'callback' => 'ajax_command_callback',    
  ),
);

2) Call back definitions.

function ajax_command_callback($form, $form_state) {
  // Collect error.
  $error = form_get_errors();
  // Clear error for all the cases.
  drupal_get_messages();
 // Logic behind error.
if (!empty($error) && $error['title']) {
   $form_state['rebuild'] = TRUE;
    // Create place holder to display error(class name / ID).
    $selector = '.error_place_holder';
    // Java script function to process error.
    $commands[] = ajax_command_invoke(NULL, "error_javascript_call");
    $commands[] = ajax_command_replace($selector, '<div class="error_place_holder"><div class = "error-msgs">' .    $error['title'] . '</div></div>');
    return array('#type' => 'ajax', '#commands' => $commands);
  }
  else {
    // Same thing you can do it for success.
    // Passing dynamic value to java script.
    $commands[] = ajax_command_invoke(NULL, "success_javascript_call", array(array('url'=>url('some_url_to_redirect_on_success'))));
    return array('#type' => 'ajax', '#commands' => $commands);
  }
}

ajax_command_replace on error:
It contains $selector as a first argument & "error_place_holder" class name is the second argument.

Selector: <div class="error_place_holder"> </div>

Error result : <div class="error_place_holder"><div class = "error-msgs">' . $error['title'] . '</div></div>

In the final, your selector will be updated with error result. Means,

<div class="error_place_holder"> <div class="error_place_holder"><div class = "error-msgs">' . $error['title'] . '</div></div> </div>

ajax_command_invoke usage.

 // Redirect on success.
  $.fn.success_javascript_call= function(val){
    window.location.href = val.url;
  }
  // Hide or do something on error.
  $.fn.error_javascript_call= function(val){
    $('.class').removeClass().addClass('some-test');
  }