Overview

When performing AJAX operations in Magento 2 admin, it is a good practice to show a loader to indicate that a process is running. Magento provides a built-in loader using jQuery widgets that can be easily integrated.

Step-by-Step Implementation

1. Add a loader container in your admin HTML template.
2. Use Magento's built-in processStart and processStop events.
3. Trigger the loader before and after your AJAX call.

HTML Template

    
Content here

    

JavaScript Example

require(['jquery'], function ($) {
    $('#your-button').on('click', function () {

        // Start Loader
        $('body').trigger('processStart');

        $.ajax({
            url: 'your/ajax/url',
            type: 'POST',
            data: {},
            success: function (response) {
                console.log(response);
            },
            complete: function () {
                // Stop Loader
                $('body').trigger('processStop');
            }
        });

    });
});
    

Alternative: Loader for Specific Container

require(['jquery'], function ($) {
    var container = $('#loader-example');

    container.trigger('processStart');

    // After AJAX completes
    container.trigger('processStop');
});
    

Important Notes

• Magento uses a built-in loader widget, so no external library is required.
• processStart shows the loader, and processStop hides it.
• Always stop the loader in the complete callback to avoid stuck loaders.
• You can customize the loader UI via CSS if needed.