9

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.

| improve this question | | | | |
31

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

| improve this answer | | | | |
17

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'); 
| improve this answer | | | | |
  • 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? – Shawn Northrop Nov 29 '17 at 0:52
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.

| improve this answer | | | | |
0

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');
| improve this answer | | | | |

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.