Customize native loader

Question

I would like to challenge the template structure of Magento 2 loader which is declared in the lib/web/mage/loader.js but I can't find where this widget is calling by Magento to override the javascript ?

I mean, I'm able to extend the widget with this code :

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

$.widget("custom.loader", $.mage.loader, {
    options: {
        icon: '',
        texts: {
            loaderText: $.mage.__('Please wait...'),
            imgAlt: $.mage.__('Loading...')
        },
        template:
            '<div class="loading-mask-custom" data-role="loader">' +
                '<div class="loader">' +
                    '<img alt="<%- data.texts.imgAlt %>" src="new path">' +
                    '<p><%- data.texts.loaderText %></p>' +
                '</div>' +
            '</div>'
    }
});

return $.custom.loader; });

And to call it from the Magento_Theme module in app/design but I still have the native one (loading-mask class)

Answer 1

Maybe it's late to reply, but I hope it can help someone who face same issue. Please create requirejs-config.js on your app/design/frontend/{Vendor}/{Custom_Theme}/Magento_Theme and add this code :

var config = {
map: {
    '*': {
        'loader' : 'Magento_Theme/js/custom-loader'
     }
   }
};

then create js file on inside Magento_Theme folder web/css/custom-loader.js and write your override loader.js template, here is mine as example :

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">' +
                    // change content with whatever you want
                    '<div class="spinner">' + 
                        '<div></div>' +
                    '</div>' +
                    // end change
                    '<p><%- data.texts.loaderText %></p>' +
                '</div>' +
            '</div>'
         }
     });
return $.mage.loader;
});

after finish create above files, deploy and refresh the cache of website :

php bin/magento c:c
php bin/magento c:f
php bin/magento setup:static-content:deploy

For testing: just hit this code on your browser console jQuery('body').loader('show') and you will see your custom loader.