How to show loader on custom checkout page in Magento 2?

Question

I have created some steps in magento 2 on saving the data an ajax is fired. I want to show loader between start and complete process how to i achieve that.

My JS file for saving the data is :

define(
[
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'mage/url'
],
function ($, quote, urlBuilder, errorProcessor, urlFormatter) {
'use strict';

return {
    /**
     * Save SimpleNote ibn the quote
     *
     * @param simpleNote
     */
    $('body').trigger('processStart');
    save: function (simpleNote) {
        if (simpleNote) {
            var quoteId = quote.getQuoteId();
            var url;

            url = urlBuilder.createUrl('/carts/mine/set-simple-note', {});

            var payload = {
                cartId: quoteId,
                simpleNote: {
                    simpleNote: simpleNote
                }
            };

            if (!payload.simpleNote.simpleNote) {

                return true;
            }

            var result = true;

            $.ajax({
                url: urlFormatter.build(url),
                data: JSON.stringify(payload),
                global: false,
                contentType: 'application/json',
                type: 'PUT',
                async: false
            }).done(
                function (response) {
                    result = true;
                    $('body').trigger('processStop');
                }
            ).fail(
                function (response) {
                    result = false;
                    errorProcessor.process(response);
                    $('body').trigger('processStop');
                }
            );

            return result;
        }
    }
};
});

Answer 1

You can show the loader with $('body').trigger('processStart'); and hide it with $('body').trigger('processStop');.

define(
[
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'mage/url'
],
function ($, quote, urlBuilder, errorProcessor, urlFormatter) {
'use strict';

return {
    /**
     * Save SimpleNote ibn the quote
     *
     * @param simpleNote
     */
    save: function (simpleNote) {
        if (simpleNote) {
            var quoteId = quote.getQuoteId();
            var url;

            url = urlBuilder.createUrl('/carts/mine/set-simple-note', {});

            var payload = {
                cartId: quoteId,
                simpleNote: {
                    simpleNote: simpleNote
                }
            };

            if (!payload.simpleNote.simpleNote) {

                return true;
            }

            var result = true;

            $.ajax({
                url: urlFormatter.build(url),
                data: JSON.stringify(payload),
                global: false,
                contentType: 'application/json',
                type: 'PUT',
                async: false,
                beforeSend: function() {
                    $('body').trigger('processStart');
                }
            }).done(
                function (response) {
                    result = true;
                }
            ).fail(
                function (response) {
                    result = false;
                    errorProcessor.process(response);
                }
            ).always(
                function() {
                    $('body').trigger('processStop');
                }
            );

            return result;
        }
    }
};
});

Answer 2

In code when you want to show loader, put this code :

showLoader: true