ローダーウィジェットをmagento2に実装する方法

ローダーウィジェットをmagento 2に実装したいのですが、私のフォームにはボタンを1つ配置しました

<div style="display:inline; float:right;  width:100%; margin-bottom:5px;">
    <button style="" class="scalable go" type="submit" id="button1"><span>Do some action</span></button>
</div>

このボタンをクリックすると、url（frontName / Controller / Action）を呼び出します。このアクションの実行中に、ローダーウィジェットを表示したいと思います。

Require JSを介して読み込まれたJSファイル内で使用すると、非常にシンプルになります（すべて/ほとんどのスクリプトはそうする必要があるため、詳細については触れません）。

 $('body').trigger('processStart');

そしてそれを削除するには

$('body').trigger('processStop');

結果：

Magento2にはローダーウィジェットがあります。

ajaxリクエストでそれを使用する簡単な方法。

$.ajax({
    ...// ajax setting,
    showLoader: true, // enable loader
    context: jqueryElementorSelector // element that will be coverer by loader, default body, optional
}).than(...)

自分でも使える

<div data-role="pannel" data-mage-init='{"loader": {}}'>
     content
</div>

そしてJSで

$('[data-role="pannel"]').trigger('show.loader'); // or .mage('loader', 'show')
....
$('[data-role="pannel"]').trigger('hide.loader'); 

Ajax以外の呼び出しでローダーを呼び出したいと思います

一時的な解決策：送信またはその他のイベントで使用できます：$（ 'body'）.loader（ 'show'）;

https://minhducnho.wordpress.com/2016/11/23/magento2-show-default-loader-in-magento/

しかし、これは非ajax呼び出しでローダーウィジェットを呼び出すマゼントの方法ではないと思います。同じ問題があったため、一時的なソリューションとして実装しました。

Magentoの使用スクリプトで読み込みアイコンを表示する簡単な方法：

ローダーを表示するには：

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

または使用：

var body = $('body').loader();
body.loader('show');

または

$('body').trigger('processStart');

ローダーを非表示にするには：

var body = $('body').loader();
body.loader('hide');

または

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

または

jQuery('body').loader('destroy');

または

var body = $('body').loader();
body.loader('destroy');

または

$('body').trigger('processStop');