How to initialize a block loader Magento 2

How to initialize a block loader Magento 2

How to initialize a block loader Magento 2:

Did you want to add loader into **templates/cart/totals.phtml**
These some ways to add loader spinner into block or page.

1 Use: <div data-bind=”blockLoader: isLoadding”> /** Block Content HTML */ </div>,

with this option you should add **isLoadding : ko.observable(false)** into your Component

Example: Block XML Define

<block class="Magento\Framework\View\Element\Template" name="block-name" template="Namespace_ModuleName::templates.phtml"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="scope_name" xsi:type="array"> <item name="component" xsi:type="string">Namespace_ModuleName/js/componentjsfile</item> </item> </item> </argument> </arguments> </block>
Code language: HTML, XML (xml)

Block templates.phtml CODE

<div id="abc-def" data-bind="scope: 'scope_name'"> <div class="product-wizard-selections" data-bind="blockLoader: isLoading"> <div class="cart table-wrapper"> HTML CONTENT </div> </div> </div>
Code language: HTML, XML (xml)

Script

<script type="text/x-magento-init"> { "#abc-def": { "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout(); ?> } } </script>
Code language: HTML, XML (xml)

Javascript code: Namespace_ModuleName/js/componentjsfile

define([ 'uiComponent', 'ko' ], function (Component, ko){ return Component.extend({ defaults: { addToCartTitle: 'Add To Cart' }, isLoading: ko.observable(false), initObservable: function () { this._super(); this.isLoading(true); } }); });
Code language: JavaScript (javascript)

2: With <div class=”loader”> using rjsResolver

js file named “Namespace_ModuleName/js/abc

define([ 'rjsResolver', ], function (resolver) { 'use strict'; /** * Removes provided loader element from DOM. * * @param {HTMLElement} $loader - Loader DOM element. */ function hideLoader($loader) { let defaultValue = this; $loader.parentNode.removeChild($loader); } /** * Initializes assets loading process listener. * * @param {Object} config - Optional configuration default data after loaded component * @param {HTMLElement} $loader - Loader DOM element. */ function init(config, $loader) { resolver(hideLoader.bind(config, $loader)); } return init; });
Code language: PHP (php)

PHTML file

<div id="block-loader-id" data-role="abc-loader" class="loading-mask" data-mage-init='{"Namespace_ModuleName/js/abc": {}}'> <div class="loader"> <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>" alt="<?= /* @escapeNotVerified */__('Loading...') ?>" style="position: absolute;"> </div> </div> <script> require([ 'mage/url', 'Magento_Ui/js/block-loader' ], function (url, blockLoader) { blockLoader("<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"); return url.setBaseUrl('<?= /* @escapeNotVerified */ $block->getBaseUrl() ?>'); }); </script>
Code language: JavaScript (javascript)

3 thoughts on “How to initialize a block loader Magento 2

  1. Hi, thank you for sharing, I am a little confused since I don’t understand completely why is required to use ‘Magento_Ui/js/block-loader’. Checking at checkout they are using both too but if I remove the blockLoader the loader gif is still showing up.

    1. Hi Tadeo Barranco,

      The script Magento_Ui/js/block-loader is used for trigger loading spinner from the html template *.html
      Sample

      <div id="some-id" data-bind="blockLoader: isLoading">Content</div>

Average
5 Based On 2

Leave a Reply

Your email address will not be published. Required fields are marked *