Sur la balise body d’un site Magento 2 vous pouvez voir l’attribut suivant :

<body data-mage-init='{"loaderAjax": {}, "loader": { "icon": "http://la-jolie-url.com/static/frontend/Magento/luma/fr_FR/images/loader-2.gif"}}'>

L’attribut data-mage-init permet d’initialiser un widget javascript de Magento 2 sur la dite balise. Ici, les widgets loaderAjax et loader ont été initialisés sur la balise body.

Partant de ce principe, nous pouvons afficher le célèbre spinner animé pour faire patienter l’internaute très simplement :

jQuery('body').loader('show');
jQuery('body').loader('hide');

Si l’image loader-2.gif ne vous plaît pas, vous pouvez définir votre propre image sur une balise d’un de vos templates. Par exemple, à l’intérieur d’un template *.phtml cela donnerait :

<?php $icon = $block->getViewFileUrl('images/myLoader.gif'); ?>
<div id="myDiv" data-mage-init='{"loader": {"icon": "<?php echo $icon; ?>"}}'>
    <p>Coucou</p>
</div>
<script>
jQuery('#myDiv').loader('show');
jQuery('#myDiv').loader('hide');
</script>

En plus de la configuration icon vous pouvez définir d’autres configurations que vous trouverez dans la déclaration même du widget (comme le template html du loader) :

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

        },
        // ...