Submit Indicator
This module adds visual loading indicators to standard Drupal form submits, similar to how AJAX forms behave. It helps prevent accidental double submissions by showing feedback while the form is being processed on the server, and offers customizable spinner, throbber, or fullscreen loading animations.
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:
- A css spinner background-image on the button
- Drupal's standard AJAX throbber
- Drupal's AJAX fullscreen throbber
Configuration
- Install and enable the module
- Visit Admin / Config / User Interface / Submit Indicator
- Choose your default indicator style (spinner, throbber, or fullscreen)
- 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_indicatorfor 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:
- The configured indicator (spinner, throbber, or fullscreen) is shown
- The button is optionally disabled to prevent double-clicks
- If client-side validation fails, the indicator resets immediately
- If the form submits successfully, the page navigates and the indicator disappears
- 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