Magento2 use loader for specific portion which are being updating.
i.e minicart section,product image section,estimate shipping.

I want show default loader in page. How can I do that?

  • Your question is not clear to me. What is the loader which you're talking about? Can you give me info? – Khoa TruongDinh May 10 '18 at 5:51
  • loader is shown at differnt position prntscr.com/jfyybo , prntscr.com/jfyyqh I want it in centr which is default prntscr.com/jfyykg something like jQuery('body').loader('show'); and jQuery('body').loader('show'); instead multiple – Ketan Borada May 10 '18 at 6:16
  • I think should keep the default loader, this is because it will show for a part which is updating data. – Khoa TruongDinh May 10 '18 at 6:20
  • I know that but I want to do what I mentioned,thanks – Ketan Borada May 10 '18 at 6:22

Very close to Solution

I have tried this solution but it is not working on checkout due to multiple ajax loader is there so any of them is conflict.I have use Amasty Checkout

I have oveeride module-ui\view\base\web\js\block-loader.js and use $('body').loader('show'); and $('body').loader('hide'); and remove it's template file but some time loader not hide in checkout page due to multiple ajax call on that page,also product gallery loader is not affected with this code.I don't know it is proper metjhod or not?

], function (ko, $, template) {
    'use strict';

    var blockLoaderTemplatePath = 'ui/block-loader',
        blockContentLoadingClass = '_block-content-loading',

     blockLoader = $(blockLoader);

     * Helper function to check if blockContentLoading class should be applied.
     * @param {Object} element
     * @returns {Boolean}
    function isLoadingClassRequired(element) {
        var position = element.css('position');

        if (position === 'absolute' || position === 'fixed') {
            return false;

        return true;

     * Add loader to block.
     * @param {Object} element
    function addBlockLoader(element) {

     * Remove loader from block.
     * @param {Object} element
    function removeBlockLoader(element) {

    return function (loaderHref) {
        loaderImageHref = loaderHref;
        ko.bindingHandlers.blockLoader = {
             * Process loader for block
             * @param {String} element
             * @param {Boolean} displayBlockLoader
            update: function (element, displayBlockLoader) {
                element = $(element);

                if (ko.unwrap(displayBlockLoader())) {
                } else {

You should try this, This is default by magento 2


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.