Magento Loaders in Breeze evolution

[rutulritz]

Hi,

I am implementing custom signup form pupup in my website. Now I am using AJAX to submit form data.

How can I show the mage/loader in the form on whole page?

In tag loader properties are rendering but how to show loader while calling ajax?

Please guide me on the same.

Thanks

[vovayatsyuk]

You can use .spinner(true/false) on any DOM element. For the whole page use body:

$('body').spinner(true);

And here is a full-featured call:

$('body').spinner(true, {
  delay: 200, 
  css: {
    background: 'none'
  }
});

[rutulritz]

Thanks @vovayatsyuk
Loader is showing now.
One more thing I want to change the loader image with loading mask template html as below:

define([
    'jquery',
    'jquery/ui',
    'mage/loader'
], function ($) {
    'use strict';

    $.widget('mage.loader', $.mage.loader, {
        options: {
            texts: {
                loaderText: $.mage.__('Please wait...')
            },
            template:
                '<div class="loading-mask" data-role="loader">' +
                    '<div class="loader">' +
                        '<div class="spinner la-ball-newton-cradle la-3x">' + 
                            '<div></div>' +
                            '<div></div>' +
                            '<div></div>' +
                            '<div></div>' +
                        '</div>' +
                    '</div>' +
                '</div>'
        }
    });

    return $.mage.loader;
});

How can I do this.

[vovayatsyuk]

I suggest applying the custom design via css without changing the markup and adding a new portion of js.

[rutulritz]

Ok, I will try that

Thanks again