Submit Indicator

Adds AJAX-like loading animations to non-AJAX form buttons

AJAX forms in Drupal display loading indicators (spinners or throbbers) when submitted. This module provides the same functionality for regular form submissions - showing visual feedback during server-side processing and preventing double-submission issues.

The module supports three indicator types:

1. A css spinner background-image on the button
2. Drupal's standard AJAX throbber
3. Drupal's AJAX fullscreen throbber

Configuration

1. Install and enable the module
2. Visit Admin / Config / User Interface / Submit Indicator
3. Choose your default indicator style (spinner, throbber, or fullscreen)
4. Done - all forms now show feedback on submit

You can also target specific form buttons.

For detailed configuration options, see the README.md.

Features

• Three indicator types: Spinner overlay on button, Drupal's throbber next to button, or fullscreen overlay
• Automatic or opt-in: Enable for all forms by default, or only specific forms
• Form API property: Use #submit_indicator for per-form and per-button control (similar to #ajax)
• Smart exclusions: Automatically skips AJAX forms, optionally excludes admin pages or specific form IDs
• CSS customizable: Theme the spinner color and appearance via CSS custom properties

How It Works

When a user clicks a submit button on a non-AJAX form:

1. The configured indicator (spinner, throbber, or fullscreen) is shown
2. The button is optionally disabled to prevent double-clicks
3. If client-side validation fails, the indicator resets immediately
4. If the form submits successfully, the page navigates and the indicator disappears
5. A configurable timeout resets the indicator if the page doesn't navigate (handles errors)

Usage: #submit_indicator Property

// Use fullscreen overlay for a form
$form['#submit_indicator'] = ['type' => 'fullscreen'];

// Shorthand - just pass the type
$form['#submit_indicator'] = 'throbber';

// Disable for a specific button
$form['actions']['preview']['#submit_indicator'] = FALSE;

// Disable for entire form
$form['#submit_indicator'] = FALSE;

// Spinner with custom color
$form['actions']['submit']['#submit_indicator'] = [
  'type' => 'spinner',
  'color' => '#000000',
];

Available Options

• type - 'spinner', 'throbber', or 'fullscreen'
• color - Hex color for spinner (spinner type only)
• message - Text shown next to throbber (throbber type only)
• disableButton - Whether to disable the button (default: true)

Similar Modules

• Page Load Progress - Fullscreen loading overlay during page loads.
• Hide Submit - Hides or disables submit buttons.

Requirements

• Drupal 10 or 11