16

I want to implement loader widget in magento 2, In my form i have placed one button

<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>

When i click this button i want to call url (frontName/Controller/Action). While this action performing i want to show loader widget.

1
39

It's impressively simple when used inside a JS file loaded via Require JS (All/most your scripts should be so I won't go into detail about that):

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

And to remove it

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

Result:

enter image description here

1
  • 1
    thanks man you saved me up-voted
    – Asad Ullah
    Apr 6 at 11:15
20

Magento2 has loader widget.

Simples way to use it with ajax request.

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

Also you can use it by self

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

and in JS

$('[data-role="pannel"]').trigger('show.loader'); // or .mage('loader', 'show')
....
$('[data-role="pannel"]').trigger('hide.loader'); 
1
  • 1
    I am using showLoader: true inside the $.ajax setting. I am getting the following error in the console: loader.js:210 Expected to start loader but did not find one in the dom Any idea why this might be? Do I have to add a loader element to the DOM manually? I am using a custom theme, perhaps I removed a block containing the default loader? Nov 29 '17 at 0:52
2

A simple way to show loading icon in Magento use script:

To show loader:

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

or use:

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

or

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

To hide loader:

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

OR

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

OR

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

OR

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

OR

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

I guess you want to call loader on non-ajax call

Temporary solution: you can use on submit or any other event: $( 'body' ).loader('show');

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

but i guess this is not magento way to call loader widget on non-ajax call , I had same issue so implemented it as temporary solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.